I am getting error while using "npm start command for React application - node.js

I am new to react and this is my first application.
I have installed latest versions of node, npm/npx.
I created a directory using "create-react-app my-app".
After this when i enter the directory and type "npm start", I get the following error. Please help
C:\Users\admin\my-app>npm start
> my-app#0.1.0 start C:\Users\admin\my-app
> react-scripts start
Starting the development server...
events.js:288
throw er; // Unhandled 'error' event
^
Error: spawn cmd ENOENT
←[90m at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)←[39m
←[90m at onErrorNT (internal/child_process.js:469:16)←[39m
←[90m at processTicksAndRejections (internal/process/task_queues.js:84:21)←[39m
Emitted 'error' event on ChildProcess instance at:
←[90m at Process.ChildProcess._handle.onexit (internal/child_process.js:273:12)←[39m
←[90m at onErrorNT (internal/child_process.js:469:16)←[39m
←[90m at processTicksAndRejections (internal/process/task_queues.js:84:21)←[39m {
errno: ←[32m'ENOENT'←[39m,
code: ←[32m'ENOENT'←[39m,
syscall: ←[32m'spawn cmd'←[39m,
path: ←[32m'cmd'←[39m,
spawnargs: [ ←[32m'/s'←[39m, ←[32m'/c'←[39m, ←[32m'start'←[39m, ←[32m'""'←[39m, ←[32m'/b'←[39m, ←[32m'"http://localhost:3000"'←[39m ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app#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! C:\Users\admin\AppData\Roaming\npm-cache\_logs\2020-04-12T15_19_48_491Z-debug.log
Here is my package.json content
{
"name": "my-app",
"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",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.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"
]
}
}
As suggested by some, I have deleted my node modules folder and then did npm update followed by npm install but still i am getting the same error. Any help would be very much appreciated

I have seen this before. Try deleting your node_modules folder and after that run npm update and then npm install.
If that doesn't work there are a few answers from another forums:
Some windows users said that add System32 to environment variables helped:
Goto Control Panel > System and Security > System > Advanced system settings > Enviroment variables and set a system variable to path C:\Windows\System32\ and restart your System.
Worst case scenario: downgrade react-scripts to 2.1.8 :
npm install react-scripts#2.1.8

Related

issues with running npm start on wsl2

I'm transitioning from working on an ubuntu remote server that I accessed through ssh, to my local windows machine and wsl2
I don't know JS at all, but what worked on the server suddenly is not working on my computer at all. I've tried all different kinds of npm commands found here, but to no avail
This is the full error I'm getting
nick#GameCube:~/Winions.gg/frontend/my-app$ npm start
> my-app#0.1.0 start /home/nick/Winions.gg/frontend/my-app
> react-scripts start
/home/nick/Winions.gg/frontend/my-app/node_modules/eslint-webpack-plugin/node_modules/jest-worker/build/index.js:110
_ending;
^
SyntaxError: Unexpected token ;
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/home/nick/Winions.gg/frontend/my-app/node_modules/eslint-webpack-plugin/dist/getESLint.js:9:5)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app#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/nick/.npm/_logs/2022-12-11T03_44_57_094Z-debug.log
This is my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"homepage": "https://winions.gg",
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.2.0",
"react": "^18.2.0",
"react-bootstrap": "^2.6.0",
"react-circular-progressbar": "^2.1.0",
"react-dom": "^18.2.0",
"react-icons": "^4.6.0",
"react-router-dom": "^6.4.3",
"react-scripts": "^5.0.1",
"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": {
"babel-eslint": "^10.1.0"
}
}
I just want to be able to run the react app. God help me please
Copying from my comment so this shows up as answered in the feed:
Older versions of Node don't support public fields on classes. 12.4 is the first Node version to support that syntax, and Jest is transpiled from TypeScript to support Node 14 as of this date. This table is a good resource for finding out what newer features of EcmaScript are supported in which versions of Node.

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.

Node.js Cannot Find Module error on npm start

I am getting an error like the below when I run npm start command to start the server for my first react project. I have tried uninstalling and reinstalling the node.js but did not work. How can I resolve this issue? I am including my package.json and my directory structure over here.
This is the error:
> reactproject1#1.0.0 start C:\Users\LENOVO\reactproject1
> node index.js
internal/modules/cjs/loader.js:969
throw err;
^
Error: Cannot find module 'C:\Users\LENOVO\reactproject1\index.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
at Function.Module._load (internal/modules/cjs/loader.js:842:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reactproject1#1.0.0 start: `node index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reactproject1#1.0.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! C:\Users\LENOVO\AppData\Roaming\npm-cache\_logs\2020-07-18T09_12_04_972Z-debug.log
This is my package.json file of my react project. I have edited it by adding "start":"node index.js".
{
"name": "reactproject1",
"version": "1.0.0",
"description": "restropart",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
My Directory tree is as follows
-ReactProject
-node_modules
-public
-src
->index.js
-package.json
-package-lock.json
My index.js file resides inside the src folder. The node_modules, public, src, package.json and package-lock.json files are on the same line.
The start script refers to index.js, but you don't have such a file - it's under src/index.js. You could either move it to the project root, or update the start script accordingly:
"scripts": {
"start": "node src/index.js"
},

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

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.

Unable to deploy application on heroku

I am receiving the following error while deploying my application on heroku, I have deployed it before with no problems. I also have not changed the package.json file, so I am unsure why I am getting the following error.
There are no additional configs for heroku, the application was previously deployed, and cannot be updated.
The application is deployed currently under a previous version through the heroku website from my github.
Any help to resolve this issue would be greatly appreciated!
error from heroku
-----> Build
Running heroku-postbuild
> operations-reporting#1.0.0 heroku-postbuild /tmp/build_04594e22478b41fb98f830b9b12c2400
> NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
added 86 packages from 287 contributors and audited 906755 packages in 16.658s
found 2 moderate severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details
> client#0.1.0 build /tmp/build_04594e22478b41fb98f830b9b12c2400/client
> react-scripts build
internal/modules/cjs/loader.js:800
throw err;
^
Error: Cannot find module 'es-abstract/2019/CreateDataProperty'
Require stack:
- /tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/object.getownpropertydescriptors/implementation.js
- /tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/object.getownpropertydescriptors/index.js
- /tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/util.promisify/implementation.js
- /tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/util.promisify/index.js
- /tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/html-webpack-plugin/index.js
- /tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/react-scripts/config/webpack.config.js
- /tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/react-scripts/scripts/build.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
at Function.Module._load (internal/modules/cjs/loader.js:690:27)
at Module.require (internal/modules/cjs/loader.js:852:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.<anonymous> (/tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/object.getownpropertydescriptors/implementation.js:3:26)
at Module._compile (internal/modules/cjs/loader.js:959:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
at Module.load (internal/modules/cjs/loader.js:815:32)
at Function.Module._load (internal/modules/cjs/loader.js:727:14)
at Module.require (internal/modules/cjs/loader.js:852:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/object.getownpropertydescriptors/implementation.js',
'/tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/object.getownpropertydescriptors/index.js',
'/tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/util.promisify/implementation.js',
'/tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/util.promisify/index.js',
'/tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/html-webpack-plugin/index.js',
'/tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/react-scripts/config/webpack.config.js',
'/tmp/build_04594e22478b41fb98f830b9b12c2400/client/node_modules/react-scripts/scripts/build.js'
]
}
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.PQkmQ/_logs/2019-12-14T21_42_39_533Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! operations-reporting#1.0.0 heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the operations-reporting#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.PQkmQ/_logs/2019-12-14T21_42_39_547Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- node_modules checked into source control
https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
package.json
{
"name": "client",
"version": "0.1.0",
"main": "index.js",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"config": "^3.2.4",
"express": "^4.17.1",
"express-validator": "^6.3.0",
"formik": "^2.0.6",
"mongoose": "^5.7.12",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0",
"react-table": "^6.10.3",
"reactstrap": "^8.1.1",
"schema-utils": "^2.6.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"
]
},
"devDependencies": {
"concurrently": "^5.0.0",
"nodemon": "^2.0.1"
},
"proxy": "http://localhost:5000"
}
Find the missing module and update your package like so:
npm install --save --save-exact foo#1.2.3
This is from heroku
Other solution:
heroku config:set NODE_MODULES_CACHE=false

Resources