React Uncaught ReferenceError：进程未定义

2023-11-21

我遇到了 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

升级到react-scripts v5并不总是解决方案。

描述了此错误的完整原因here。简而言之，这是一个brief概括：

该错误是由于react-error-overlay (许多人从未听说过，因为它是react-scripts）。该软件包的依赖项已更新以支持webpackv5，不幸的是它不兼容react-scripts v4.

方法1（覆盖包版本）

如果升级到react-scriptsv5 不适合您，您还可以尝试另一种解决方法，即固定react-error-overlay到版本6.0.9:

删除你的yarn.lock or package-lock.json，然后再次安装您的依赖项。

使用纱线

纱线将开箱即用地考虑分辨率字段。

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

For 纱线工作区，将上面的分辨率放在根目录下package.json，不在有问题的文件夹中。看到这个issue评论。

使用 npm (>=v8.3.0)

相当于resolutions对于 npm 来说是overrides.

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

使用 npm (

你需要确保npm使用resolutions当你跑步时的田地npm install。要自动化安装，看到这个answer

方法2（使用webpack插件）

另一种（不太流行）的解决方法是使用 webpack 插件：

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

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

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

For customize-cra用户请看这个answer或这个github评论.

最后一种方法并不流行，因为没有多少 CRA 用户需要直接接触 webpack 来使用 React。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS