我遇到了 iframe 问题。直到今天，一切都按预期进行。今天我添加了一个非常简单的 Modal 组件，不知何故 iframe 开始出现。当我编辑文件并完成热重载时会出现它。此外，对于此问题，它在控制台中显示错误为“Uncaught ReferenceError：进程未定义”。有人可以帮我解决这个问题吗？
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
sma*_*c89 239
升级到react-scripts v5并不总是解决方案。
此处描述了此错误的完整原因。简而言之，这里有一个简短的总结：
该错误是由于react-error-overlay（许多人从未听说过，因为它是 的依赖项react-scripts）导致的。该软件包的依赖项已更新以支持webpackv5，但不幸的是，它与 v4 不兼容react-scripts。
如果升级到react-scriptsv5 不适合您，您还可以尝试另一种解决方法，即固定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，而不是放在有问题的文件夹中。请参阅本问题评论。
resolutionsnpm 的等效项是overrides.
"overrides": {
"react-error-overlay": "6.0.9"
},
您需要确保在运行时npm使用该字段。要自动安装，请参阅此答案resolutionsnpm install
另一种（不太流行）的解决方法是使用 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 来使用 React。
dPa*_*Pac 138
我尝试将react-scripts更新到5.0.0，但这不起作用。
npm：-npm i -D react-error-overlay@6.0.9
yarn：-yarn add -D react-error-overlay@6.0.9
小智 40
在 package.json 中添加此代码
"devDependencies": {
"react-error-overlay": "6.0.9"
}
之后运行npm install命令。在互联网上滚动两天后，它对我有用。
Mih*_*scu 31
在最终修复之前（也许是这个 PR），对于任何使用 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
Max*_*ane 26
如果您使用Vite创建了 React 应用程序，则在 .env 文件中使用 VITE_ 作为环境变量的前缀。
VITE_API_URL=http://localhost:5000
您可以使用以下方式访问它：
import.meta.env.VITE_API_URL
以下是如何在代码中使用环境变量的示例：
import.meta.env.VITE_API_URL
要了解更多信息，请访问 - https://vitejs.dev/guide/env-and-mode.html
Man*_*ara 19
通过将react-scripts更新到5.0.0解决了该问题
Nag*_*aba 17
我找到了最好的解决方案。
问题是因为window.process当 React 热加载时你会丢失变量，并且进程仅存在于节点上，而不存在于浏览器上。
因此，您应该在应用程序加载时将其注入浏览器。
将此行添加到App.js
useEffect(() => {
window.process = {
...window.process,
};
}, []);
Web*_*rer 12
很多答案建议覆盖react-error-overlayto 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-error-overlay了6.0.10。
所以，我的解决方法是：
"react-scripts": "4.0.3"在package.json中设置小智 12
对于那些仍然遇到问题的人：如果使用 Webpack，请运行npm install -D dotenv-webpack，如果使用 typescript npm install -D @types/dotenv-webpack。
然后在你的 Webpack 配置中添加import Dotenv from "dotenv-webpack";
And
...
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),
}),
],
},
},
};
反过来，每次启动项目时，不会在控制台中显示以下警告。
DefinePlugin 中的警告“process.env”值冲突
从react-scripts 4.0.3 升级到5.0.0 对我来说不起作用。最终唯一有效的是上面提出的解决方案
使用纱线
"devDependencies": {
"react-error-overlay": "6.0.9"
},
"resolutions": {
"react-error-overlay": "6.0.9"
}
然后安装纱线
对于 npm 我认为“决议”必须替换为“覆盖”
| 归档时间： |
|
| 查看次数： |
302067 次 |
| 最近记录： |