未捕獲的ReferenceError：未定義行程/第0行：決議錯誤

對于一個簡單的專案，運行npm installand時npm start，我的默認 Web 瀏覽器¹打開，我F12在控制臺中點擊查看兩種型別的錯誤訊息。

如您所見，錯誤訊息是：

• Uncaught ReferenceError: process is not defined， 和
• Line 0: Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context.

我應該怎么做才能糾正這些錯誤？

我相信這些錯誤與 ReactJS 有關，它在后臺使用了 Webpack。

我在其他地方看到過這些錯誤，有時還提到 了 ReactJS 和/或 Webpack 的版本問題。有關更多示例，請參閱下面的參考串列。其中一些鏈接（問題）可能與這里的問題有關，但我不確定。

I provide my .eslintrc.json and package.json files below. But since they will hardly be sufficient to reproduce the error, here is a link to a zip file containing all the necessary project files. ²

.eslintrc.json :

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
  "rules": {
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

package.json :

{
  "name": "Uncaught ReferenceError",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.1",
    "@testing-library/user-event": "^7.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "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"
    ]
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.29.2"
  }
}

References

• Zip file containing the needed project files
• React Uncaught ReferenceError: process is not defined
• Is this the bug of react-error-overlay?
• process is not defined on hot reload
• bug: Uncaught ReferenceError: process is not defined
• Line 0: Parsing error: Cannot read property 'map' of undefined
• React Typescript: Line 0: Parsing error: Cannot read property 'name' of undefined

¹ Google Chrome Version 98.0.4758.102, 64-bit. Running on Windows 10.

² 通過運行安裝專案（本地）npm install——這可能需要大約 5-9 分鐘。
然后運行npm start以在默認 Web 瀏覽器中打開專案。

uj5u.com熱心網友回復：

將所有npm軟體包更新到最新版本

考慮將所有npm軟體包更新到最新版本。
目的是降低發生版本沖突的風險。

A. 全域安裝npm-check-updates

在命令列中，運行： ¹

npm install --global npm-check-updates

B. 檢查最新版本

現在預覽哪些軟體包npm-check-updates將升級。運行： ²

npm-check-updates

package.json如果該串列看起來不錯，請繼續通過運行將最新的軟體包版本寫入您的：

npm-check-updates --upgrade

這是它在 Windows 10 中的樣子：

C. 安裝最新版本

在命令列中，運行： ³

npm install

D. 檢查瀏覽器和/或終端中的錯誤

在命令列中，運行：

npm start

瀏覽器現在顯示不少于五個錯誤。

終端確認五個錯誤。

哇。這看起來非常非常糟糕，不是嗎？

Nope. Fear not! – All you need to do now is close the server (Ctrl C) and run npm start once more!

Now there are no errors in the browser.

And the terminal says Compiled successfully!

Yay!

A note about purging package-lock.json and node_modules

I wholeheartedly embrace a frequent use of the npm install command. As soon as there is a slightest change to package.json or any other configuration file – such as .eslintrc.json – the npm install command should immediately be run.

By contrast, I have never ever seen anything gained by deleting the package-lock.json file and/or the node_modules directory. ⁴

Reference

• npm-check-updates – documentation

¹ I am on Windows 10, but I expect all the commands provided here to work just as fine on both Linux and macOS.

² To get a list of options, run npm-check-updates --help.

³ Expect the npm install command to take about 3-8 minutes to complete.
But if you run it again, it should complete in about 10-15 seconds.

⁴ I would love to see a reproducible project for which:

• You run npm install (and then npm start).
• You delete package-lock.json and/or node_modules.
• You run npm install again.
• Any improvement is observed.

I have never seen any such example reported.
Every time you try this recipe, you will pay a penalty cost of 5-10 minutes of your precious time.

標籤：节点.js 反应 网页包

上一篇：由于enenv檔案，您可以阻止WebPack從捆綁無法訪問的模塊中

下一篇：如何使用create-react-app從webpack中的捆綁檔案路徑、publicPath、PUBLIC_URL中洗掉初始斜杠？