迹忆客 专注技术分享

要解决 React 中的“Uncaught ReferenceError: process is not defined”，需要在项目的根目录中打开终端并通过运行 npm install react-scripts@latest 更新 react-scripts 包的版本，并在必要时重新安装依赖项 .

在项目的根目录（package.json 文件所在的位置）目录中打开终端并运行以下命令。

# 👇️ 使用 NPM
$ npm install react-scripts@latest


# --------------------------------------------

# 👇️ 使用 YARN
$ yarn add react-scripts@latest

该错误是由 react-error-overlay 包引起的，该包具有已更新以支持 webpack v5 并且与 react-scripts v4 不兼容的依赖项。

如果错误没有解决，请尝试安装 6.0.9 版本的 react-error-overlay 包。

使用下面的命令进行安装。

# 👇️ 使用 NPM
$ npm install --save-dev react-error-overlay@6.0.9

# --------------------------------------------

# 👇️ 使用 YARN
$ yarn add react-error-overlay@6.0.9 --dev

我们添加了 react-error-overlay 包的 6.0.9 版本作为开发依赖项。

现在打开我们的 package.json 文件并添加以下解决方案对象。

{
  "resolutions": {
    "//": "See https://github.com/facebook/create-react-app/issues/11773",
    "react-error-overlay": "6.0.9"
  }
}

如果错误未解决，请尝试删除我们的 node_modules 和 package-lock.json（或 yarn.lock）文件，重新运行 npm install 并重新启动 IDE。

# 👇️ delete node_modules and package-lock.json
$ rm -rf node_modules
$ rm -f package-lock.json
$ rm -f yarn.lock

# 👇️ clean npm cache
$ npm cache clean --force

$ npm install

Yarn 会自动将 react-error-overlay 包解析为 6.0.9 版本。

但是，如果我们使用 npm 并且错误仍然存在，请将以下预安装脚本添加到我们的 package.json 文件中。

package.json

{
  "scripts":{
      "preinstall": "npx npm-force-resolutions",
  }
}

npm-force-resolutions 包修改你的 package-lock.json 文件以强制安装特定版本的传递依赖。

出于我们的目的，我们要确保始终安装 react-error-overlay 包的 6.0.9 版本。

总结

要解决 React 中的“Uncaught ReferenceError: process is not defined”，请在项目的根目录中打开终端并通过运行 npm install react-scripts@latest 更新 react-scripts 包的版本，并在必要时重新安装依赖项 .