进程未在热重载上定义

Question

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

Uncaught ReferenceError: process is not defined

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

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

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

编辑 2：如果我删除那个 iframe，一切似乎 return 正常，即页面更新并且可以交互

Answer 1

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

• 已将 npm 更新为最新版本
• 已将反应脚本更新为最新

不确定哪一个修复了它。

Answer 2

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

如果您的应用程序因为依赖项不兼容而无法升级，或者您需要节点版本 < 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，强制您的包-lock.json 文件实际使用 6.0.9 和 npx npm-force-resolutions

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

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

Answer 3

我最近也有这个问题。 我做了几件事来让它工作。你也可以试试这些。

• 在package.json.

  里面把react-script版本改成4.0.3

• 将此添加到 package.json，在依赖项下方。

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

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

• 删除您的 node_modules 和包裹-lock.json.

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

注意：完成上述步骤后，我不得不再次 运行 npm install react-error-overlay@6.0.9 来解决这个问题。