Search code examples
reactjswebstorm

npm start produces error in React app on WebStorm

I see the question has been asked before but none of the solutions seems to help me.

Error that I am getting, I tried to remove the node_modules directory as well. And then reinstalled npm. Still the same error.

  1. rm -rf node_modules
  2. npm install
  3. npm start -- same error

Even tried deleting the package-lock.json, but same error on npm start.

Node version - v10.15.3
NPM version - 6.4.1

Aryans-MacBook-Pro:react-new-app aryanarora$ npm start

> [email protected] start /Users/aryanarora/Desktop/The Web Developer Bootcamp/01 All Practice Files /js<:>/Jon Duckett/react-new-app
> react-scripts start

sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: `react-scripts start`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] 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!     /Users/aryanarora/.npm/_logs/2019-04-29T06_08_07_273Z-debug.log

After doing npm list --depth 0 | grep react-scripts output as follows:

Aryans-MacBook-Pro:react-new-app aryanarora$ npm list --depth 0 | grep react-scripts
└── [email protected]
npm ERR! peer dep missing: typescript@*, required by @typescript-eslint/[email protected]
npm ERR! peer dep missing: typescript@*, required by @typescript-eslint/[email protected]
npm ERR! peer dep missing: typescript@*, required by @typescript-eslint/[email protected]
npm ERR! peer dep missing: typescript@*, required by @typescript-eslint/[email protected]
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev, required by [email protected]
npm ERR! peer dep missing: typescript@*, required by @typescript-eslint/[email protected]
npm ERR! peer dep missing: typescript@*, required by [email protected]

Package.json File

{
  "name": "react-new-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
  },
  "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"
    ]
  }
}
Solution

  • The problem could be the node and npm itself. Try to uninstall node from your machine completely by using Homebrew or NVM, whichever you used to install node. Else you have to do it manually.

    Follow the steps in this link - https://stackabuse.com/how-to-uninstall-node-js-from-mac-osx/

    Next install the LTS node from the official website (https://nodejs.org/en/), this should solve the issue.

    One thing i also found out to be helpful was to change the directory. My directory had folder named "</>js" which I beleive created some issues.