热重载时未定义进程

Question

我有一个用 create React app 制作的 React 应用程序，热重载完全杀死了页面并出现错误：

Uncaught ReferenceError: process is not defined

奇怪的是，似乎注入了一个我以前从未注意到的 iframe：

当我重新加载并破坏页面并阻止更新时，该 iframe 就会添加到 DOM 中。我在网上找不到任何有关“iframe-bundle.js”的文档。

编辑：我尝试删除我的节点模块和任何有问题的导入（我craco之前临时安装了）。还是同样的问题。真是太烦人了！

编辑 2：如果我删除该 iframe，一切似乎都会恢复正常，即页面更新并且可交互

Answer 1

将您的应用程序升级到 CRA (react-scripts) v5npm i react-scripts@latest将解决该问题。

如果您的应用程序由于依赖项不兼容或您需要节点版本< 14而无法升级，您可以尝试以下对我有用的解决方法：

1. 恢复到 CRA 4：npm i --save-exact react-scripts@4.0.3
2. 添加react-error-overlay作为开发依赖项：npm i --save-dev react-error-overlay@6.0.9
3. 然后将以下行添加到您的 package.json 中

"resolutions": {
  "react-error-overlay": "6.0.9"
},

4. 如果您使用的是NPM，请强制您的 package-lock.json 文件实际使用 6.0.9npx npm-force-resolutions

   如果您正在使用Yarn，只需运行即可yarn install应用您的解决方案并解决问题

更多信息请访问https://github.com/facebook/create-react-app/issues/11773

Answer 2

我修好了它。我做了两件事：

• 将 npm 更新到最新
• 将反应脚本更新为最新

不确定是哪一个修复了它。

Answer 3

我最近也遇到了这个问题。我做了几件事来让它发挥作用。你也可以尝试这些。

• 将package.json中的react-script版本更改为4.0.3。

• 将其添加到 package.json 的依赖项下方。

“决议”：{“反应错误覆盖”：“6.0.9”}，

• 在 devDependencies 中安装 react-error-overlay v6.0.9。

• 删除您的node_modules 和package-lock.json。

• 执行 npm install 并检查是否有效。

注意：执行上述步骤后，我必须再次运行 npm install react-error-overlay@6.0.9 来解决此问题。