使用create-react-app搭建的MERN应用遇webpack模块缺失错误求助

问题原因 #

你遇到的错误是因为Webpack 5不再默认提供Node.js核心模块的polyfill，而你的React前端项目中意外引入了body-parser、content-disposition这类原本仅用于Node.js后端的依赖，这些依赖调用了querystring、path等Node核心模块，导致打包时无法解析。

解决方案 #

由于Create React App（CRA）默认隐藏Webpack配置文件，你可以通过以下几种方式解决：

方案一：使用react-app-rewired修改配置（推荐，无需eject）

1. 安装必要依赖

   npm install react-app-rewired customize-cra querystring-es3 path-browserify --save-dev
   

2. 在项目根目录创建config-overrides.js文件，添加Webpack fallback配置：

   const { override, addWebpackResolve } = require('customize-cra');
   
   module.exports = override(
     addWebpackResolve({
       fallback: {
         "querystring": require.resolve("querystring-es3"),
         "path": require.resolve("path-browserify"),
         // 若还有其他类似缺失模块，可在此继续添加对应polyfill
       }
     })
   );
   

3. 修改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"
   }
   

4. 重启开发服务：

   npm start
   

方案二：eject暴露Webpack配置（不可逆，谨慎使用）

1. 执行eject命令暴露配置文件：

   npm run eject
   

2. 在项目根目录的config/webpack.config.js中，找到resolve配置项，添加fallback：

   resolve: {
     // 其他已有配置...
     fallback: {
       "querystring": require.resolve("querystring-es3"),
       "path": require.resolve("path-browserify"),
     }
   }
   

3. 安装对应的polyfill包：

   npm install querystring-es3 path-browserify --save-dev
   

4. 重启开发服务。

方案三：移除前端不必要的后端依赖（根源解决）

1. 检查React前端代码，确认是否误引入了body-parser、content-disposition这类仅用于后端的库（比如Express的中间件）。
2. 删除这些错误的引入语句，然后清理并重新安装依赖：

   rm -rf node_modules package-lock.json
   npm install
   

3. 重启开发服务。

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