Vue3中Webpack5的Polyfills破坏性变更致服务无法启动求助

我用Vue3搭配Webpack5时碰到破坏性变更导致服务启动失败，试过用NodePolyfillPlugin、手动配置resolve.fallback、写自定义polyfill文件这些方法都没用，还是收到48条一模一样的错误：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

下面是几个可行的解决思路：

1. 先搞清楚到底缺啥模块 #

错误提示没明确指出具体模块，得先排查清楚：

• 运行启动命令时查看完整错误栈，找到Can't resolve 'xxx'中的xxx，这就是缺失的模块
• 检查项目第三方依赖，确认哪个老旧库在调用Node.js核心模块（比如fs、net这类）

2. 修正Vue.config.ts的配置格式 #

你之前用的是CommonJS写法，但vue.config.ts需要用ESModule格式，试试这个配置：

import { defineConfig } from '@vue/cli-service'
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin'
import nodeLibsBrowser from 'node-libs-browser'

export default defineConfig({
  configureWebpack: {
    plugins: [
      new NodePolyfillPlugin()
    ],
    resolve: {
      fallback: {
        // 要么用nodeLibsBrowser全覆盖，要么手动补充缺失的模块
        ...nodeLibsBrowser,
        // 确定不需要的模块直接设为false
        fs: false,
        tls: false,
        net: false,
        child_process: false
      }
    },
    // 无关警告可以直接忽略
    ignoreWarnings: [/Failed to parse source map/],
  }
})

先安装所有需要的依赖包：

npm install node-polyfill-webpack-plugin node-libs-browser https-browserify stream-http os-browserify crypto-browserify path-browserify --save-dev

3. 排查第三方依赖的问题 #

大概率是某个老旧依赖在浏览器环境中调用了Node.js核心模块，试试这两个办法：

• 将依赖升级到支持Webpack5的版本（比如老版axios、socket.io容易出现这类问题）
• 用webpack-chain给特定依赖单独配置解析规则：

import { defineConfig } from '@vue/cli-service'
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin'

export default defineConfig({
  chainWebpack: config => {
    // 给缺失的模块添加别名
    config.resolve.alias
      .set('https', 'https-browserify')
      .set('http', 'stream-http')
    // 给有问题的老旧依赖添加babel处理
    config.module
      .rule('js')
      .include.add(/some-old-library/) // 替换为你的依赖名称
      .end()
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        presets: ['@babel/preset-env']
      })
  },
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()]
  }
})

4. 全局注入常用polyfill #

如果process、Buffer这类全局变量缺失，用Webpack的ProvidePlugin全局注入：

import { defineConfig } from '@vue/cli-service'
import webpack from 'webpack'

export default defineConfig({
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser',
        Buffer: ['buffer', 'Buffer']
      })
    ],
    resolve: {
      fallback: {
        process: require.resolve('process/browser'),
        buffer: require.resolve('buffer')
      }
    }
  }
})

安装对应的依赖包：

npm install process buffer --save-dev

5. 最后手段：直接屏蔽警告 #

要是确定某些模块不需要polyfill，又没法替换依赖，直接关闭相关警告：

import { defineConfig } from '@vue/cli-service'

export default defineConfig({
  configureWebpack: {
    ignoreWarnings: [
      { message: /BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default/ }
    ]
  }
})

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