Vue项目配置Webpack fallback后出现http.IncomingMessage未定义错误如何解决？

问题本质 #

你遇到的错误源于https-browserify仅实现了浏览器端发起HTTP请求的能力，完全没有模拟Node.js http模块中的服务端相关对象（比如IncomingMessage、ServerResponse）。而Webpack 5默认不再自动polyfill Node.js核心模块的全部API，当你的代码或依赖的库尝试访问这些仅存在于服务端环境的API时，就会抛出未定义的错误。

这个问题和Webpack 5直接相关；和Express的关联在于：如果你的项目或依赖中引入了Express（或依赖了Express用到的Node.js http服务端逻辑），就会触发这类错误——因为Express是服务端框架，它依赖的http模块API在浏览器环境下无法被https-browserify完整模拟。

修复步骤 #

1. 排查并清理客户端中的服务端代码 #

先检查项目代码，确认是否不小心将Express等服务端框架的代码打包到了客户端，或者是否有直接使用Node.js http模块服务端API的逻辑（比如创建HTTP服务器、处理请求响应对象）。如果有，将这部分逻辑迁移到后端服务，或直接移除。

2. 替换更完整的HTTP Polyfill #

如果确实需要在浏览器环境中使用http模块的完整API（包括服务端相关对象），将https-browserify替换为stream-http——它更完整地模拟了Node.js http模块的全部API：

• 首先安装依赖：

  npm install stream-http --save-dev
  

• 修改vue.config.js中的resolve.fallback配置：

  const { defineConfig } = require("@vue/cli-service");
  module.exports = defineConfig({
    transpileDependencies: false,
    configureWebpack: {
      resolve: {
        fallback: {
            "fs": false,
            "path": require.resolve("path-browserify"),
            "stream": require.resolve("stream-browserify"),
            "http": require.resolve("stream-http"), // 替换为stream-http
            "https": require.resolve("https-browserify"), // 保留https的polyfill
            "crypto": require.resolve("crypto-browserify"),
            "zlib": require.resolve("browserify-zlib"),
            "net": require.resolve("net-browserify")
        },
      }
    },
  });
  

3. 忽略不必要的服务端依赖（可选） #

如果是某个第三方库错误地引入了服务端逻辑，你可以通过Webpack的IgnorePlugin忽略相关模块，避免打包服务端代码：

const { defineConfig } = require("@vue/cli-service");
const webpack = require('webpack');

module.exports = defineConfig({
  transpileDependencies: false,
  configureWebpack: {
    resolve: {
      // 保留原有的fallback配置
      fallback: {
          "fs": false,
          "path": require.resolve("path-browserify"),
          "stream": require.resolve("stream-browserify"),
          "http": require.resolve("https-browserify"),
          "crypto": require.resolve("crypto-browserify"),
          "zlib": require.resolve("browserify-zlib"),
          "net": require.resolve("net-browserify")
      },
    },
    plugins: [
      // 忽略Express或http模块的服务端部分
      new webpack.IgnorePlugin({ resourceRegExp: /express|http\.IncomingMessage|http\.ServerResponse/ })
    ]
  },
});

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