【发布时间】：2022-05-03 01:58:39
【问题描述】：
我遇到了 iframe 的问题。 直到今天，一切都按预期工作。今天我添加了一个非常简单的 Modal 组件，不知何故 iframe 开始出现。它出现在我编辑文件并完成热重载时。同样与此问题有关，它在控制台中显示错误为“未捕获的 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
【问题讨论】：
-
/** * 直到github.com/facebook/create-react-app/issues/11771 * 得到修复，让我们隐藏问题而不是解决它 */ body > iframe[style*="2147483647"]:not([id="webpack- dev-server-client-overlay"]) { 显示：无； } 将此添加到根 css 文件中。将暂时修复错误，直到有适当的修复。学分：github.com/facebook/create-react-app/issues/…
标签： reactjs