create-react-app 从4.0.3升级到5.0.1后，"process"(以及所有环境变量)不可用,

nr7wwzry 于 3个月前发布在 React

关注(0)|答案(5)|浏览(87)

升级 react-scripts 包从 4.0.3 到 5.0.1 后，尝试在本地运行仅导致浏览器中出现空白的白屏。浏览器控制台中还有一条错误信息：Uncaught ReferenceError: process is not defined。似乎试图以任何方式引用 process 都会产生这个错误，尽管这是 create-react-app 在 Adding Custom Environment Variables 中记录的。

我尝试过恢复依赖项吗？
是的，我完全删除了 node_modules 和 package-lock.json,并运行 npm install -g npm@latest 和 npm install,但没有成功。npm 版本是 8.8.0,node 版本是 16.15.0。

我在用户指南中搜索了哪些术语？
故障排除页面上没有任何关于这个问题的内容，而且文档搜索对我来说也没有用--它抱怨检查我的网络连接。

环境信息
环境信息：

current version of create-react-app: 5.0.1
  running from C:\Users\david.o\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 Intel(R) Core(TM) i9-10885H CPU @ 2.40GHz
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.8.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.32)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: ^5.0.1 => 5.0.1
  npmGlobalPackages:
    create-react-app: Not Found

请注意，这有点不准确，因为我正在使用 Chrome v101。

重现问题的步骤
最初，我对 package.json 进行了单行更改，将 react-scripts 依赖项从 "^4.0.3" 更改为 "^5.0.1"。我尝试了以下所有组合，每次都完全删除 node_modules 和 package-lock.json,但都没有成功：

仅 react-scripts ^5.0.1
react-scripts ^5.0.1 和 react-error-overlay 6.0.9
react-scripts ^5.0.1 和 react-error-overlay 6.0.9,其中 overrides 是用于 react-error-overlay 6.0.9 的
react-scripts ^5.0.1 和 react-error-overlay 6.0.9,其中 overrides 是用于 react-error-overlay 6.0.9 的，并且在 App 中有建议的代码添加：

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

仅带有代码添加的 react-scripts ^5.0.1
我还运行了 npm update 以防万一，它更新了一些包，但没有解决任何问题。

预期行为
从 4.0.3 升级 react-scripts 到 5.0.1 应该很简单，不会破坏我的代码。

实际行为
从 4.0.3 升级 react-scripts 到 5.0.1 完全破坏了在本地运行的所有能力，我们别无选择，只能回滚。

create-react-app

来源：https://github.com/facebook/create-react-app/issues/12354

5条答案

按热度按时间

gxwragnw1#

我们仍然面临这个问题。已经尝试了这里提到的所有解决方案：#11773,但没有一个有效。

赞(0）回复(0）举报 2个月前

3phpmpom2#

我正在面临相同的问题，不知道是否会得到解决。

赞(0）回复(0）举报 2个月前

uajslkp63#

对于仍然遇到这个错误的人，以下是我是如何解决的。
我使用了 craco ,因为不想从 RS 中弹出。
然后在 craco.config.js 中有：

const webpack = require('webpack');

module.exports = {
    webpack: {
        plugins: {
            add: [
                new webpack.ProvidePlugin({
                    process: 'process/browser.js',
                })
            ]
        },
        configure: {
            resolve: {
                fallback: {
                    'fs': false,
                    'path': false,
                    'crypto': false,
                }
            },
        },
    },
};

你可能不需要 configure.resolve.fallback 部分，但如果你遇到了像 "fs/path/crypto" 未定义这样的错误，你也在这里找到了解决方案 :)
你还需要将进程作为开发依赖项