React项目因Webpack 5移除默认Polyfill致大量模块找不到错误

方案一：补全react-app-rewired配置（你之前尝试的工具） #

1. 安装必要依赖
   终端进入项目根目录，执行：

   npm install --save-dev react-app-rewired buffer https-browserify querystring-es3
   

   如果还有其他模块报错（比如stream、crypto等），把对应的polyfill包也加入命令，比如stream-browserify、crypto-browserify。

2. 创建配置文件
   在项目根目录新建config-overrides.js，写入：

   module.exports = function override(config, env) {
     config.resolve.fallback = {
       ...config.resolve.fallback,
       buffer: require.resolve('buffer'),
       https: require.resolve('https-browserify'),
       querystring: require.resolve('querystring-es3'),
       // 其他报错的模块按此格式添加，比如：
       // stream: require.resolve('stream-browserify'),
     };
     return config;
   };
   

3. 修改启动命令
   打开package.json，替换scripts内容：

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

4. 重启项目
   停掉当前开发服务，重新执行npm start。

方案二：使用craco（更稳定的替代工具） #

如果react-app-rewired用着不顺，可换用craco：

1. 安装依赖

   npm install --save-dev @craco/craco buffer https-browserify querystring-es3
   

2. 创建配置文件
   项目根目录新建craco.config.js：

   module.exports = {
     webpack: {
       configure: (webpackConfig) => {
         webpackConfig.resolve.fallback = {
           ...webpackConfig.resolve.fallback,
           buffer: require.resolve('buffer'),
           https: require.resolve('https-browserify'),
           querystring: require.resolve('querystring-es3'),
           // 其他报错模块按需添加
         };
         return webpackConfig;
       },
     },
   };
   

3. 修改启动命令
   更新package.json的scripts：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

4. 重启项目
   执行npm start即可。

额外提示 #

• 若部分模块仍报错，可在项目入口文件（如src/index.js）顶部手动引入polyfill：

  import 'buffer';
  import 'https-browserify';
  

• 这类错误本质是Webpack 5不再默认提供Node.js核心模块的浏览器兼容版本，需要手动为依赖这些模块的第三方库补全兼容代码。

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