未捕获的 ReferenceError：进程未定义/第 0 行：解析错误

Question

对于一个简单的 创建 React 应用 项目时，我运行 npm install。 然后 npm start 打开默认的 Web 浏览器¹。 按 F12 在控制台中显示两条错误消息。

错误消息为：

• Uncaught ReferenceError: process is not Defined 和
• Line 0: Parsing error ：当模式为 ES6 且在模块上下文中时，应该出现 ImportDeclaration。

我应该怎么做才能纠正这些错误？

---

我在其他地方看到过这些错误，有时指的是 package.json 中软件包的版本问题。
请参阅下面的参考列表。 我相信参考文献3-6可能与这里的问题有关。

下面提供了 .eslintrc.json 和 package.json 文件。
但由于它们几乎不足以重现错误，
这是一个链接 包含所有必需项目文件的 zip 文件。 ²

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

参考文献

• 创建 React 应用程序 (CRA)
• 包含所需项目文件的压缩文件
• React Uncaught ReferenceError：进程未定义
• 热重载时未定义进程
• 行0：解析错误：无法读取未定义的属性“map”
• React Typescript：第0行：解析错误：无法读取属性 未定义的“名称”

---

¹ 就我而言，Google Chrome 版本 98.0.4758.102，64 位。 在 Windows 10 上运行。

² 通过运行 npm install 安装项目（本地） - 这可能 大约需要 5-9 分钟。
然后运行 ​​npm start 在默认 Web 浏览器中打开项目。

Answer 1

我应该如何纠正这些错误？

答案：将所有 npm 软件包更新到最新版本

尝试更新所有 npm 打包到最新版本。
目的是降低版本冲突的风险。

1. 全局安装 npm-check-updates

在命令行中，运行：
¹

npm install --global npm-check-updates

2. 检查最新版本

预览 npm-check-updates 将升级哪些软件包：
²

npm-check-updates

如果该列表看起来不错，请继续将软件包更新到它们的版本
package.json 中的最新版本：

npm-check-updates --upgrade

这是 Windows 10 中的终端响应：

3.安装最新版本

在命令行中，运行：
³

npm install

4. 检查浏览器和/或终端中的错误

在命令行中，运行：

npm start

浏览器现在显示不少于 5 个错误。

终端确认这五个错误。

^{^ 点击放大}

哇。这看起来真的，真的很糟糕，不是吗？

没有。 不用担心！ – 您现在所需要做的就是关闭服务器
(Ctrl+C) 并再次运行 npm start。
– 如果您仍然看到错误，请再执行一次 – 关闭服务器
并再次运行 npm start。
如果这也没有帮助，请尝试等待大约 3-7 分钟后再进行
再次尝试 npm start 。

当我尝试此操作时，浏览器中不再出现任何错误。

终端报告编译成功！

耶！

参考

• npm-check-updates – 文档

---

¹
我使用的是 Windows 10，但我希望此处提供的所有命令
在 Linux 和 macOS 上也能正常工作。

²
要获取选项列表，请运行 npm-check-updates --help。

³
预计 npm install 命令大约需要 3-8 分钟
完成。
但如果您再次运行它，它应该在 10-15 秒内完成。