将react-script从4升级至5后出现Polyfill相关错误求助

问题原因 #

react-scripts 5.x 内置了 Webpack 5，而 Webpack 5 不再默认提供 Node.js 核心模块（如 crypto、stream、fs 等）的 polyfill，这和 Webpack 4 及之前的行为不同，导致依赖这些模块的代码或第三方包运行报错。

解决方案 #

1. 定位具体缺失的模块 #

先查看完整错误栈，找到报错中提到的具体模块名（比如 crypto），后续配置需要针对该模块处理。

2. 通过 react-app-rewired 自定义 Webpack 配置 #

react-scripts 默认不暴露 Webpack 配置，需借助 react-app-rewired 和 customize-cra 来修改：

• 安装依赖：

  npm install react-app-rewired customize-cra --save-dev
  

• 安装对应模块的 polyfill 包（以 crypto 和 stream 为例）：

  npm install crypto-browserify stream-browserify process --save
  

• 在项目根目录创建 config-overrides.js 文件，添加如下配置：

  const { override, addWebpackPlugin } = require('customize-cra');
  const webpack = require('webpack');
  
  module.exports = override(
    // 处理 process 对象的 polyfill
    addWebpackPlugin(
      new webpack.ProvidePlugin({
        process: 'process/browser',
      })
    ),
    // 配置缺失模块的 fallback
    (config) => {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        crypto: require.resolve('crypto-browserify'),
        stream: require.resolve('stream-browserify'),
        // 其他缺失的模块可以在这里追加
      };
      return config;
    }
  );
  

• 修改 package.json 中的启动脚本，替换为 react-app-rewired：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

3. 升级第三方依赖包 #

如果是某个第三方包导致的错误，检查该包的版本，升级到适配 Webpack 5 的最新版本——很多主流包已经更新了对 Webpack 5 的支持，无需手动添加 polyfill。

4. 移除不必要的 Node 模块引用 #

如果是自己的代码中误引入了 Node.js 核心模块（比如 fs、path，这些在浏览器环境中无法运行），直接删除相关引用即可。

内容的提问来源于stack exchange，提问作者SajjadZare