开发者问题收集

React Uncaught ReferenceError：进程未定义

2021-12-15
330432
reactjs

我遇到了 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
3个回答

升级到 react-scripts 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 ，然后再次安装您的依赖项。

使用 yarn

yarn 将在开箱即用的情况下考虑分辨率字段。 

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

对于 yarn 工作区 ，将上述分辨率放在根 package.json 中，不在有问题的文件夹中。请参阅此 issue 评论。

使用 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 来使用 react。

smac89
2021-12-22

我尝试将 react-scripts 更新至 5.0.0，但没有成功。

解决方案：-

  • 如果您使用的是 npm ：-

npm i -D [email protected]

  • 如果您使用的是 yarn ：-

yarn add -D [email protected]

dpacman
2021-12-27

在 package.json 中添加此代码 

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

之后运行 npm install 命令。 在网上搜索了两天后，我发现这个方法有效。

Vijay
2022-01-12