React - Error: Cannot find module react when trying to run npm start

Question

I am running into a bug when trying to run 'npm start' for a react app.

My app had been running mostly as I expected while developing, however I ran into a bug that required me to update my node version as a potential fix. I updated node to v16.13.2 and I also decided to update npm to v8.3.2. Now when trying to run npm start I receive the following error. I also find it odd that the files referenced are not from directories within my current project folder.

I have tried the following so far:

1. Deleting the package-lock.json and node_modules folder and then reinstalling with npm install.
2. Restarting my computer.
3. npm install react-scripts.

I was wondering if anyone could kindly help with a solution?

    node:internal/modules/cjs/loader:936
  throw err;
  ^

    Error: Cannot find module 'react'
    Require stack:
     - C:\Users\shane\AppData\Roaming\npm\node_modules\react-scripts\scripts\start.js
        at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
        at Function.resolve (node:internal/modules/cjs/helpers:108:19)
        at Object.<anonymous> (C:\Users\shane\AppData\Roaming\npm\node_modules\react-scripts\scripts\start.js:52:31)
        at Module._compile (node:internal/modules/cjs/loader:1101:14)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
        at Module.load (node:internal/modules/cjs/loader:981:32)
        at Function.Module._load (node:internal/modules/cjs/loader:822:12)
        at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
        at node:internal/main/run_main_module:17:47 {
      code: 'MODULE_NOT_FOUND',
      requireStack: [
        'C:\\Users\\shane\\AppData\\Roaming\\npm\\node_modules\\react-scripts\\scripts\\start.js'
      ]
    }

package.json

    {
  "name": "faucet",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-eslint": "^10.0.2",
    "babel-polyfill": "6.26.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-stage-2": "6.24.1",
    "babel-preset-stage-3": "6.24.1",
    "babel-register": "6.26.0",
    "@babel/eslint-parser": "^7.5.4",
    "@metamask/detect-provider": "^1.2.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@truffle/contract": "^4.4.5",
    "@truffle/hdwallet-provider": "^2.0.0",
    "bulma": "^0.9.3",
    "ganache-cli": "^6.12.2",
    "node-fetch": "^2.6.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^4.0.3",
    "solc": "^0.8.11",
    "truffle": "^5.4.29",
    "web-vitals": "^2.1.3",
    "web3": "^1.7.0"
  },
  "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"
    ]
  }
}

Morganica

Try specifically installing react ie npm install react@^17.0.2 – Hegyera

Unfortunately that did not work :( – Morganica

Answer 1

After a week I have finally found a solution.

First I tried reinstalling an older versions of node and npm, which did not fix my issue. Then I reinstalled the versions I stated above.

Somehow my project became corrupted, potentially because I updated Node/NPM while it was open. I then tried carrying over my code into a new create-react-app. After doing this I went to my package.json folder and came to find my final steps was with the version I have of react in my dependencies.

The version of react I was using ( "react": "^17.0.2") is not compatiable with a lot of the node modules I'm using in my project, which caused them to not be found in NPM.

I was able to fix this by reverting to an older version of react by updating to the following in my dependencies for my package.json file:

"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-scripts": "4.0.3"

Once this was done I saved and did NPM install in the terminal and now my app is loading correctly.

Note: I tried updating the react dependencies in my original project and was still unable to get it working. However, this new project works with my old code and the changes noted above. Hope this can help someone!

Morganica

Answer 2

In case it helps anyone as dumb as me...I was testing out a package for a datepicker, I didn't like it, so I went back to terminal, found the install step, added 'un' and hit enter...

not realizing that the install command copied from the web at 'react' in it...so I removed react from my react project :)

so if you come across this error - check your package.json file in the client folder and make sure there is a "react": item!

Hyperextension

Answer 3

encountering this error is not uncommon, particularly after the installation of new dependencies.

To resolve this issue, it is recommended to proceed by removing or deleting the existing 'node_modules' directory and subsequently executing the command npm install --legacy-peer-deps in your terminal. This will ensure the installation of dependencies with legacy peer dependencies support, potentially resolving the encountered errors.

Alliterate