Problem in the command "npm start" Failed at the fourth-tic-tac-toe#0.1.0 start script. npm ERR! react-scripts: not found - node.js

I am making a basic tic tac toe game in react. first I create the app with these command's
npx create-react-app my-app
cd my-app
npm start
In the beginning it's working is fine but when I installed some dependencies and again start the app with the command npm start,
give me error
shivam#shivam:~/Documents/Projects/React/fourth-tic-tac-toe$ npm start
> fourth-tic-tac-toe#0.1.0 start /home/shivam/Documents/Projects/React/fourth-tic-tac-toe
> react-scripts start
sh: 1: react-scripts: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! fourth-tic-tac-toe#0.1.0 start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the fourth-tic-tac-toe#0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/shivam/.npm/_logs/2020-04-25T10_03_35_243Z-debug.log
My package.json file is here
{
"name": "fourth-tic-tac-toe",
"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",
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-scripts": "3.4.1",
"react-toastify": "^5.5.0",
"reactstrap": "^8.4.1"
},
"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"
]
}
}
and npm version 5.6.0
I installed all the with the command npm install dependency-name
and only one dependency with npm install --save bootstrap
After this installation when I tried to start app give me error

install new version of node
npm install -g npm#latest
Go in your app directory and use this command
npm install react-scripts#2.1.8
It has worked for me.

Related

Heroku Push rejected, Node.js & React App

Node.Js + React App, all work fine on localhost, when i push to heroku, Push rejected, idk why.
Please help my heroes.
Heroku Push logs:
> NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-paypal-button-v2#2.6.3
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR! peer react#">=16.3.2" from #restart/context#2.1.4
npm ERR! node_modules/#restart/context
npm ERR! #restart/context#"^2.1.4" from react-bootstrap#1.6.6
npm ERR! node_modules/react-bootstrap
npm ERR! react-bootstrap#"^1.6.6" from the root project
npm ERR! 16 more (#restart/hooks, #testing-library/react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
npm ERR! react-paypal-button-v2#"^2.6.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
npm ERR! react-paypal-button-v2#"^2.6.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /tmp/npmcache.1sG84/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.1sG84/_logs/2022-12-15T17_08_01_767Z-debug-0.log
-----> Build failed
package.json React:
{
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
"version": "0.1.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": "^1.2.1",
"install": "^0.13.0",
"react": "^18.2.0",
"react-bootstrap": "^1.6.6",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-paypal-button-v2": "^2.6.3",
"react-redux": "^8.0.5",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.2"
},
"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"
]
},
"devDependencies": {
"install-peers": "^1.0.4"
}
}
package.json Node.js:
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "server.js",
"type": "module",
"engines": {
"node": "17.x"
},
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm start --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"data:import": "node backend/seeder",
"data:destroy": "node backend/seeder -d",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
},
"author": "",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"dotenv": "^8.6.0",
"express": "^4.18.2",
"express-async-handler": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.13.15",
"morgan": "^1.10.0",
"multer": "^1.4.4"
},
"devDependencies": {
"concurrently": "^5.3.0",
"nodemon": "^2.0.20"
}
}
Node.Js + React App, all work fine on localhost, when i push to heroku, Push rejected, idk why.
Please help my heroes.
Thanks for help.
You are directly depending on React 18 but react-paypal-button-v2#2.6.3 (the latest release at the time of writing) is not compatible with that version yet, as described in the error message:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
If you don't need anything in particular from React 18, your best bet is to downgrade to version 17.
If you need React 18, the safest thing to do is to wait for a new version of react-paypal-button that declares a compatible peer dependency. There is an open issue on the project requesting this.
The last option, which I do not recommend, is to ask Heroku to use legacy peer deps behaviour. This behaviour is deprected for a reason, and while it may let your install proceed, it could also lead to unpredictable bugs.
I see you running npm install --prefix frontend at the start of your Heroku logs. It should work if you add the flag --legacy-peer-deps to that command. Just a suggestion, use npm ci instead of the npm install to use the exact same dependencies locally and in the production server (you will have to push the package-lock.json as well, see the command reference: https://docs.npmjs.com/cli/v9/commands/npm-ci).

Heroku fail to compile: [eslint] Must use import to load ES Module

I'm trying to deploy a react app I worked on and when I try to push to heroku master it says "failed to compile node.js". Now I've already tried to specify what node I'm using and update to the lastest parser link, but still getting an error.
Here is what I'm getting in the terminal:
-----> Build
Running heroku-postbuild
> potato-network#1.0.0 heroku-postbuild /tmp/build_82788311
> cd client && npm install && npm run build
> core-js#3.25.4 postinstall /tmp/build_82788311/client/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js-pure#3.25.4 postinstall /tmp/build_82788311/client/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
added 1429 packages from 795 contributors and audited 1434 packages in 21.79s
211 packages are looking for funding
run `npm fund` for details
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
> client#0.1.0 build /tmp/build_82788311/client
> react-scripts build
Creating an optimized production build...
Failed to compile.
[eslint] Must use import to load ES Module: /tmp/build_82788311/client/node_modules/#eslint/eslintrc/universal.js
require() of ES modules is not supported.
require() of /tmp/build_82788311/client/node_modules/#eslint/eslintrc/universal.js from /tmp/build_82788311/client/node_modules/eslint/lib/linter/linter.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /tmp/build_82788311/client/node_modules/#eslint/eslintrc/package.json.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.h5MIg/_logs/2022-10-03T00_22_02_904Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! potato-network#1.0.0 heroku-postbuild: `cd client && npm install && npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the potato-network#1.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.h5MIg/_logs/2022-10-03T00_22_02_911Z-debug.log
-----> Build failed
Here is my package.json file:
{
"name": "client",
"proxy": "http://localhost:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"axios": "^0.21.1",
"express": "^4.18.1",
"moment": "^2.29.1",
"peerjs": "^1.3.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"react-share": "^4.3.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"socket.io-client": "^3.1.2",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"#babel/eslint-parser": "^7.5.4",
"babel-eslint": "^10.0.2",
"eslint": "^8.24.0",
"eslint-plugin-react": "^7.31.8"
},
"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"
]
}
}
Here is my .eslinct.js:
env: {
browser: true,
es2021: true,
},
parser: "#babel/eslint-parser",
extends: ["eslint:recommended", "plugin:react/recommended"],
overrides: [],
parserOptions: {
ecmaVersion: "latest",
requireConfigFile: false,
sourceType: "module",
},
plugins: ["react"],
rules: {},
How can I fix it? Googling the error does not present any useful forums or raised bugs.

I can't solve the dependency tree every time i try to install #craco/craco

Unable to solve dependency tree trying to install tailwind.
This is my package.json:
{
"name": "front-end",
"version": "0.1.0",
"private": true,
"devDependencies": {
"autoprefixer": "^9.8.8",
"eslint": "^8.15.0",
"jest": "^28.1.0",
"postcss": "^7.0.39",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17"
},
"dependencies": {
"#craco/craco": "^6.4.3",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.25.0",
"js-cookie": "^3.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-saga": "^1.1.3",
"router": "^1.3.6",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "jest",
"lint": "eslint .",
"lint:fix": "eslint --fix --ext .js,.jsx ."
},
"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"
]
}
}
This is what I see in my console:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: front-end#0.1.0
npm ERR! Found: react-scripts#5.0.0
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"5.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts#"^4.0.0" from #craco/craco#6.4.3
npm ERR! node_modules/#craco/craco
npm ERR! #craco/craco#"^6.4.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Tejas\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Tejas\AppData\Local\npm-cache\_logs\2022-05-14T14_36_01_226Z-debug-0.log
i am trying to configure tailwind css and to override reactcss i am trying install #craco/craco but i am getting this error i tried useing
npm install --save --legacy-peer-deps
and installed craco using this
npm install #craco/craco --save --legacy-peer-deps
but after that it is giving me error
Downgrade the version of react-script from 5.0.0 to 4.0.0

Cannot run NPM install because it's 'unable to resolve dependency tree'

I had some issues with my node_modules so I went to delete the node_modules and run npm install. Boy was that a mistake. My project is completely messed up. When I run npm install npm it sends back this:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"15.3.0 - 16.x" from react-vis#1.11.7
npm ERR! node_modules/react-vis
npm ERR! react-vis#"^1.11.7" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/Cole/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Cole/.npm/_logs/2021-05-26T10_34_07_786Z-debug.log
Someone please help me!
Edit: Here is my package.json.
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"npm": "^7.14.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3",
"react-vis": "^1.11.7",
"redux": "^4.1.0",
"web-vitals": "^1.1.1"
},
"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"
]
}
}
Not quite sure what I did that was so detrimental but this has been a painful experience.
When running npm audit it shows that there are 87 vulnerabilities.
Running npm audit fix and npm audit fix --force do not fix anything.
Is there a way to refresh all the node_modules? Go back to square one and re-install all dependencies again?
Seems like react-vis has a peer dependency of react#"15.3.0 - 16.x". Since you have react#17.0.2, it complains. Try changing
"react": "^17.0.2",
"react-dom": "^17.0.2",
to
"react": "^16.14.0",
"react-dom": "^16.14.0",

Node.js 15 dependency problem with pullstate 1.20.x

i want to use pullstate.js in my react project but it seems to be impossible to use it with the Node.js 15.
I have tried it in Node.js 13 and there it works. Can Anybody help?
In this example i created a plain react app and try to add the dependency.
package,json
``
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#popperjs/core": "^2.9.0",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.1",
"ajv": "^6.12.6",
"bootstrap": "^4.5.3",
"moment": "^2.29.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.0",
"pullstate":"1.20.1"
},
"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"
]
}
}
``
This ist the rror i get after npm install.
code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app#0.1.0
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.12.0" from pullstate#1.20.1
npm ERR! node_modules/pullstate
npm ERR! pullstate#"1.20.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
This is unfortunately due to NPM version 7 being way more strict about peer dependency mismatches.
To get the old behaviour, run npm install with --legacy-peer-deps, as they say in the error message.
I've just released Pullstate version 1.21.0 - this has set a more broad peer dependency for React, including ^1.17.0 - I think this should solve this issue.

Resources