React前端突然无法解析多个node modules问题求助

问题根源 #

Webpack 5不再默认提供Node.js核心模块（如zlib、stream等）的polyfill，而你使用的部分前端依赖（比如body-parser）依赖了这些模块，导致打包时出现"Module not found"错误。

解决步骤 #

情况1：使用Create React App（CRA）项目 #

CRA默认不允许直接修改Webpack配置，需要借助工具覆盖：

1. 安装依赖包

   npm install react-app-rewired customize-cra browserify-zlib stream-browserify buffer util --save-dev
   

2. 在项目根目录创建config-overrides.js文件，写入以下内容：

   const { override, addWebpackResolve } = require('customize-cra');
   
   module.exports = override(
     addWebpackResolve({
       fallback: {
         "zlib": require.resolve("browserify-zlib"),
         "stream": require.resolve("stream-browserify"),
         "buffer": require.resolve("buffer/"),
         "util": require.resolve("util/")
         // 如果还有其他模块报错，比如fs，直接设为false："fs": false（前端一般不需要fs）
       }
     })
   );
   

3. 修改package.json中的scripts命令：

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

4. 重启开发服务器：npm start

情况2：自定义Webpack配置的项目 #

1. 安装所需polyfill包：

   npm install browserify-zlib stream-browserify buffer util --save-dev
   

2. 修改项目中的webpack.config.js，在resolve字段下添加fallback配置：

   module.exports = {
     // ...其他Webpack配置
     resolve: {
       fallback: {
         "zlib": require.resolve("browserify-zlib"),
         "stream": require.resolve("stream-browserify"),
         "buffer": require.resolve("buffer/"),
         "util": require.resolve("util/"),
         // 不需要的模块直接设为false，比如"fs": false
       }
     }
   };
   

3. 若遇到Buffer相关错误，在项目入口文件（如src/index.js）顶部添加：

   import { Buffer } from 'buffer';
   window.Buffer = Buffer;
   

4. 重启开发服务器或重新打包。

可选：不需要polyfill的情况 #

如果确定某个模块在前端环境中用不到，可以直接在resolve.fallback中设为false，比如：

resolve: {
  fallback: {
    "zlib": false,
    "fs": false
  }
}

但这种方式可能导致依赖该模块的功能失效，需谨慎使用。

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