React - 錯誤：嘗試運行 npm 啟動時找不到模塊反應

Question

我在嘗試為反應應用程序運行“npm start”時遇到了一個錯誤。

在開發過程中，我的應用程序基本上按照我的預期運行，但是我遇到了一個錯誤，需要我更新我的節點版本作為潛在的修復。 我將節點更新到 v16.13.2，我還決定將 npm 更新到 v8.3.2。 現在，當嘗試運行 npm start 時，我收到以下錯誤。 我也覺得奇怪的是，引用的文件不是來自我當前項目文件夾中的目錄。

到目前為止，我已經嘗試了以下方法：

1. 刪除 package-lock.json 和 node_modules 文件夾，然后使用 npm install 重新安裝。
2. 重新啟動我的電腦。
3. npm 安裝反應腳本。

我想知道是否有人可以提供解決方案？

    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

一周后，我終於找到了解決方案。

首先，我嘗試重新安裝舊版本的節點和 npm，但這並沒有解決我的問題。 然后我重新安裝了我上面提到的版本。

不知何故，我的項目損壞了，可能是因為我在 Node/NPM 打開時更新了它。 然后我嘗試將我的代碼轉移到一個新的 create-react-app 中。 完成此操作后，我去了我的 package.json 文件夾，發現我的最后一步是使用我在依賴項中做出反應的版本。

我使用的 react 版本（ "react": "^17.0.2" ）與我在項目中使用的許多節點模塊不兼容，這導致在 NPM 中找不到它們。

我可以通過在我的 package.json 文件的依賴項中更新以下內容來恢復到舊版本的 react 來解決此問題：

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

完成此操作后，我保存並在終端中安裝了 NPM，現在我的應用程序正在正確加載。

注意：我嘗試更新原始項目中的反應依賴項，但仍然無法使其正常工作。 但是，這個新項目適用於我的舊代碼和上面提到的更改。 希望這可以幫助某人！