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"
    ]
  }
}

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!