I am starting the json-server from the project with command "npm run server" and saw this problem. Currentlt, it is a React project.
Terminal error picture
I have done some research, some suggest to downgrade node.js version and other to create "npm-shrinkwrap.json" in the project. So, what is the main problem of this and how to fix it permanently?
Package.json file:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^2.1.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"server": "json-server -p3001 --watch db.json"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"json-server": "^0.4.2"
}
}
npm and node.js version:
Version
You can try to re-install node.js. The verisions cause of the this error.
Related
this is my package.json with the proxy that i'm using,
I've tried to use cors inside index.js in backend but it didn't work, I've also tried to to make .env file and write my proxy inside it, but it didn't work.
this process it working on my admin folder
"name": "frontend",
"version": "0.1.0",
"proxy": "http://localhost:8800/api",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"sass": "^1.49.8"
}
}
When using yarn start on my frontend, I keep getting the error:
/bin/sh: react-scripts: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Here is my code
"name": "frontend",
"version": "0.1.0",
"license": "MIT",
"description": "Typescript starter template for hardhat, ethers and react projects using typescript and #web3-react",
"engines": {
"node": "16.13.1",
"npm": "8.1.2"
},
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"#types/jest": "^27.0.1",
"#types/node": "^16.7.13",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"#types/styled-components": "^5.1.18",
"#web3-react/core": "^6.1.9",
"#web3-react/injected-connector": "^6.0.7",
"ethers": "^5.5.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"styled-components": "^5.3.3",
"typescript": "^4.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/styled-components": "^5.1.18"
}
}
Any ideas?
I'm starting my first node/react project and I try to write my first tests using Jest.
When I run them using yarn test, it fails with the following message :
Cannot find module 'react' from 'Form.js'
However, Jest was able to find:
'./App.css'
'./App.js'
'./App.test.js'
You might want to include a file extension in your import, or update your
'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts',
'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].
I created my project using create-react-app and here is my package.json :
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"shards-react": "^1.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}
I don't understand what the Form.js file is, as I didn't create such a File. I guess there is something wrong with my dependencies in package.json but I can't find an explanation for now.
I recently got into Web Development with NodeJS. I created a simple react app and wanted to deploy it on GitHub pages. I watched a couple of tutorials and in all of them they would add the "homepage" property in their package.json file.
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"homepage": "https://github.com/owner/project#readme",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
So I wanted to know what is this "homepage" property?
By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the homepage in your package.json.
This will let Create React App correctly infer the root path to use in the generated HTML file.
for more info
https://create-react-app.dev/docs/deployment/
Build failure
First MERN app. Having trouble deploying to Heroku. Everything worked when running locally. I've tried uninstalling/reinstalling react-bootstrap. What could be the problem?
Here's my package.json:
{
"name": "mern-workout-app",
"version": "0.1.0",
"engines": {
"node": "13.8.0"
},
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"styled-components": "^5.1.0"
},
"scripts": {
"start": "cd backend && npm install && node index.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbild": "cd client && npm install && npm run build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}