React 错误 Uncaught ReferenceError: process is not defined 解决

要解决 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": {
    "//": "查看 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。

# 删除 node_modules 和 package-lock.json
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 清除 npm 缓存
npm cache clean --force

npm install

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

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

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

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

在我们的例子中,我们要确保我们正在安装 react-error-overlay 包的 6.0.9 版本。