React项目Webpack 5打包报错：无法解析net模块，求解决方案

问题核心 #

你在使用react-scripts 5.0.1（内置Webpack 5）执行npm run build时，连续遇到path、http、net等Node.js核心模块无法解析的错误，尝试修改node_modules内的Webpack配置后仍未解决。

根本原因 #

从报错路径/node_modules/express/lib可以明确：你的前端React项目意外引入了后端框架express。express是Node.js专属的后端依赖，会调用http、net等仅在Node环境存在的模块，而Webpack 5不再默认提供这些模块的polyfill，因此打包失败。

解决方案 #

1. 移除不必要的后端依赖 #

这是最直接的解决方式：

• 执行 npm uninstall express 直接移除express依赖，之后重新执行 npm run build。
• 如果express是某个依赖间接引入的，执行 npm ls express 查看依赖树，定位到引入它的包，考虑替换该包或调整其使用方式（前端项目通常不需要用到此类包的后端功能）。

2. 不要直接修改node_modules内的配置 #

直接修改/node_modules/react-scripts/config/webpack.config.js不可持续——依赖更新后你的修改会被覆盖。如果确实需要自定义Webpack配置，推荐用craco扩展配置：

• 安装craco：npm install @craco/craco --save-dev
• 在项目根目录创建craco.config.js：

  module.exports = {
    webpack: {
      configure: {
        resolve: {
          fallback: {
            "path": require.resolve("path-browserify"),
            "http": require.resolve("stream-http"),
            "net": false, // net是Node专属模块，前端无对应API，只能禁用
            "fs": false,
            // 其他需要处理的Node核心模块
          }
        }
      }
    }
  };
  

• 修改package.json的scripts，替换为craco命令：

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

3. 是否需要降级到Webpack 4？ #

不推荐。Webpack 5带来了性能提升、更优的树摇优化等特性，降级到Webpack 4需要将react-scripts降级到4.x版本，不仅会错过后续更新，还只是掩盖了“前端项目引入后端依赖”的根本问题。

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