React Uncatch ReferenceError: 进程未定义

我对 iframe 有意见。 直到今天，一切都如预期般顺利。今天我添加了一个非常简单的 Modal 组件，然后 iframe 就出现了。它出现时，我正在编辑的文件和热重新加载完成。此外，这个问题，它显示了一个错误在控制台为“未捕获的参考错误: 进程没有定义”。 有人能帮帮我吗？

import React, {useEffect} from 'react';
import ReactDOM from "react-dom";
import Close from "../static/assets/close-white.svg"


const trapStyles = {
position: 'absolute',
opacity: 0
}
const Test = () => {


return ReactDOM.createPortal(
<div data-react-modal-body-trap="" tabIndex="0" style={trapStyles}/>,
document.getElementById("app")
)
}


const Modal = ({ open, onClose, children }) => {


useEffect(() => {


if (open)document.getElementById("app").classList.add("ReactModal__Body--open");


return () => {
document.getElementById("app").classList.remove("ReactModal__Body--open")
}
})
if (!open) return null


return ReactDOM.createPortal(
<>
<Test />
<div className="ReactModal__Overlay--after-open">
<div className="modal-form-page"
tabIndex="-1" role="dialog" aria-modal="true">
<button onClick={onClose} className="close-modal">
<img id="close-button" alt="close" src={Close}/>
</button>
{ children }
</div>
</div>
</>,
document.getElementById("ModalPortal")
)
};


export default Modal;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="%PUBLIC_URL%/favicon.ico" rel="icon"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="#000000" name="theme-color"/>
<link href="%PUBLIC_URL%/logo192.png" rel="apple-touch-icon"/>
<link href="%PUBLIC_URL%/manifest.json" rel="manifest"/>
<title>React App</title>
</head>
<body id="app">
<noscript>You need to enable javascript to run this website</noscript>
<div id="content">
<-- All other content render here -->
</div>
<div class="ReactModalPortal" id="ModalPortal"></div>
</body>
</html>

Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1)
4043 @ VM128:2
r @ VM128:2
8048 @ VM128:2
r @ VM128:2
8641 @ VM128:2
r @ VM128:2
(anonymous) @ VM128:2
(anonymous) @ VM128:2
(anonymous) @ VM128:2
e.onload @ index.js:1
be @ index.js:1
he @ index.js:1
tryDismissErrorOverlay @ webpackHotDevClient.js:184
onHotUpdateSuccess @ webpackHotDevClient.js:109
handleApplyUpdates @ webpackHotDevClient.js:257
(anonymous) @ webpackHotDevClient.js:273
load (async)
be @ index.js:1
he @ index.js:1
tryDismissErrorOverlay @ webpackHotDevClient.js:184
onHotUpdateSuccess @ webpackHotDevClient.js:109
handleApplyUpdates @ webpackHotDevClient.js:257
(anonymous) @ webpackHotDevClient.js:273
Promise.then (async)
tryApplyUpdates @ webpackHotDevClient.js:271
handleSuccess @ webpackHotDevClient.js:106
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:203
166377 次浏览
小开

这个问题通过更新反应脚本到5.0.0得到了解决

小开

升级到反应脚本 v5并不总是解决方案。

这个错误的完整原因描述为 给你。简而言之，这里是一个 简短总结:

错误是由 react-error-overlay(许多人从来没有听说过，因为它是一个依赖于 react-scripts)引起的。这个包的依赖关系被更新为支持 webpack v5，不幸的是它与 react-scripts v4不兼容。

方法1(重写软件包版本)

如果升级到 react-scripts v5对您不起作用，您还可以尝试另一种解决方案，即将 react-error-overlay固定到版本 6.0.9:

删除 yarn.lock或 package-lock.json，然后再次安装依赖项。

用纱线

纱线将考虑到分辨率领域的盒子。

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

对于 纱线工作间，将上述分辨率放在根 package.json中，而不是放在有问题的文件夹中。

使用 npm (> = v8.3.0)

Npm 的 resolutions等价于 overrides。

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

使用 npm (< 8.3.0)

在运行 npm install时，您需要确保 npm使用 resolutions字段

方法2(使用 webpack 插件)

另一个(不太流行的)解决方案是使用 webpack 插件:

plugins:[
new webpack.DefinePlugin({
process: {env: {}}
})
]

如果使用 craco(v6.3.0 +) ，只需修改 craco.config.js文件添加该插件:

{
...
webpack: {
plugins: {
add: [
new webpack.DefinePlugin({
process: {env: {}}
})
]
}
}
}

对于 customize-cra用户，请参阅此 回答或此 Github 评论。

最后一种方法并不流行，因为没有多少 CRA 用户需要直接触摸 webpack 才能做出反应。

小开

从反应脚本4.0.3升级到5.0.0对我来说很有用。

我最终得到了以下错误(如果使用 craco，则与此相关) :

TypeError: match. loader.options.plugins 不是函数

这个问题是由@未未 在他们的回答中解决的

小开

我试过升级 反应脚本到5.0.0，但是没有工作。

解决方案:-

  • 如果您正在使用 npm:-

npm i -D react-error-overlay@6.0.9

  • 如果您正在使用 yarn:-

yarn add -D react-error-overlay@6.0.9

小开

在 package.json 中添加此代码

"devDependencies": {
"react-error-overlay": "6.0.9"
}

然后运行 npm install命令。 在网上滚动了两天后，它对我起作用了。

小开

对于任何使用 npm (而不是纱线)的人来说，解决方案是这样的:

添加到 package.json:

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


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


"devDependencies":{
"react-error-overlay": "6.0.9",
...
}

然后做一个

npm install

小开

将动作脚本从 v4升级到“动作脚本”: “ ^ 5.0.0”, 似乎对我有帮助

小开

如果您使用的是 npm > v8.3，那么您可以像在 package.json中那样使用 overrides。

  "overrides": {
"react-error-overlay": "6.0.9"
}

有关重写的更多信息，请转到 给你。

问题是 6.0.10中的一个重大变化，一些依赖关系，如 react-dev-utils，将安装这个版本，即使你别针的 react-error-overlay版本到 6.0.9，这就是为什么它是必要的使用覆盖。

小开

很多答案都建议将 react-error-overlay重写为 6.0.9，但这对我来说不起作用(2022年2月11日)。在试验覆盖覆盖之前，我使用了 react-scripts 5.0.0和 react-error-overlay 6.0.10。

我没有在我的 CRA 应用程序中匆忙地定义 webpack 配置(作为 由 smac89建议) ，而是将 react-scripts降级为 4.0.3。

它与 react-scripts: 4.0.3一起工作得很好，react-scripts: 4.0.3将 react-error-overlay解析为 6.0.10。

所以，我的解决办法是:

  • 在 package.json 中设置 "react-scripts": "4.0.3"
  • 删除锁文件(yarn.lock 或 package-lock. json)和 node _ module
  • 运行安装
小开

今天(2月14日)面对同样的问题，我在 ReactJS 应用程序中使用了 Docker 容器，解决了这个问题，我将反应脚本版本降级到了4.0.3，并在6.0.9版本中安装了反应错误叠加。 所以步骤是:

  1. 删除 包裹锁定 Json文件
  2. 进入 包裹 Json文件
    1. 替换依赖项 “反应脚本”: “4.0.3”
    2. 使用 “反应-错误-叠加”: “6.0.9”将 response-error-overlay 添加到 dev 依赖项中
  3. 更新 npm: Npm 更新

我希望这能帮助大家节省时间, 干杯。

小开

对于那些使用 create-response-app 和 customize-cra 的用户，您可以使用@smac89和 addWebpackPlugin 的 Method 2解决方案，这对我来说很有用。

反应脚本: 5.0.0 Webpack: 5.64.4

// config-overrides.js
const webpack = require('webpack');
const { override, addWebpackPlugin } = require('customize-cra');


module.exports = override(
addWebpackPlugin(
new webpack.DefinePlugin({
process: { env: {} },
})
)
);

此解决方案在 npm 启动时抛出警告，但应用程序是正确编译的。

WARNING in DefinePlugin
Conflicting values for 'process.env'

这个警告没有刹车什么，但如果有人知道如何修复它请回答这个问题:)

小开

在 yarn.lock 或 package-lock. json 文件中查找字符串

"react-error-overlay@npm:^6.0.9":
version: 6.0.10 <-- here problem
etc...

并更换到

react-error-overlay@^6.0.9:
version "6.0.9"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==

保存文件并运行纱线安装

小开

我找到了最好的解决办法。

问题在于，当 React hotload 时，会丢失 window.process变量，并且进程只存在于节点上，而不是浏览器上。

所以当应用程序加载时，你应该把它注入到浏览器中。

将此行添加到 App.js

useEffect(() => {
window.process = {
...window.process,
};
}, []);
小开

对于那些仍然有这个问题: 如果使用 Webpack，运行 npm install -D dotenv-webpack和如果使用类型脚本 npm install -D @types/dotenv-webpack。
然后在 Webpack 配置中添加 import Dotenv from "dotenv-webpack"; 还有

...
plugins: [
...
new Dotenv(),
],
...

参见 https://github.com/mrsteele/dotenv-webpack/blob/master/README.md

在尝试了所有其他方法之后，这个方法终于对我起作用了。

小开

唯一对我有效的解决方案是修改@smac89为 craco 写的内容。 首先将进程作为依赖项添加。

yarn add process or npm i process

然后将这些代码行添加到 craco.config.js 中。

const webpack = require('webpack');


module.exports = {
webpack: {
...
plugins: {
add: [
new webpack.ProvidePlugin({
process: 'process/browser.js',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
],
},
},
};

反过来，每次启动项目时，没有都会在控制台中显示以下警告。

定义插件中的警告‘ process.env’的冲突值

小开

我在 reactJ 中遇到了同样的问题，我用这些步骤解决了它:

添加到 package.json:

  1. “脚本”: { “预安装”: “ npx npm-force- 分辨率” }
  2. “决心”: “反应-错误-叠加”: “6.0.9” }
小开

从反应脚本4.0.3升级到5.0.0对我来说不起作用。 唯一起作用的是上面提出的解决方案

用纱线

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

然后纱线安装

对于 npm 我认为“决议”必须被“覆盖”所取代

小开

谢谢，正如凯勒布所说，这对我有用

如果使用 Webpack，运行 npm install-D dotenv-Webpack Type escript npm install-D@types/dotenv-webpack. 然后在 Webpack 配置中，从“ Dotenv-Webpack”中添加导入 Dotenv; 还有

plugins: [
...
new Dotenv(),
],
小开

我只是更新版本的反应脚本，现在它的工作为我罚款

  "dependencies": {
"react-scripts": "5.0.0",
},
小开

移动到第5版的反应脚本给我们带来了其他问题，使用的答案与最多的投票也不适合我们。把这个添加到 package.json 做到了:

      "resolutions": {
"react-error-overlay": "6.0.9"
},
"scripts": {
"preinstall": "npx npm-force-resolutions",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
小开

注意: 这是对那些看到与 index.html相关的 process is not defined问题，而不是 OP 的回应。

这可能是因为您试图在 index.html中直接使用 process.env而不使用 <% %>

正确的用法在 index.html中是这样的:

<% if (process.env.NODE_ENV !== 'production') { %>
<script>
/* Disable Google Analytics locally */
window["ga-disable-G-something"] = true;
</script>
<% } %>

不正确的用法(这可能是你的问题) :

<script>
if (process.env.NODE_ENV !== 'production') {
/* Disable Google Analytics locally */
window["ga-disable-G-something"] = true;
}
</script>
小开

如果您已经使用 VITE 创建了响应应用程序，那么在您的环境变量前面加上 VITE _ APP in. env 文件。

例如 VITE_APP_API_URL=http://localhost:5000

你可以使用

import.meta.env.VITE_APP_API_URL

例如 const createDeck = async (title)=> {

const response = await request.post(`${import.meta.env.VITE_APP_API_URL }/deck`, {title}); return response.data;

}

欲知详情，请浏览-https://vitejs.dev/guide/env-and-mode.html


提交答案