webpack5打包React项目加载SVG时报Cannot read property 'tap' of undefined错误

问题根因 #

你遇到的报错由两个webpack5配置冲突导致：

1. Webpack5 内置了Asset Modules静态资源处理模块，默认会自动处理.svg格式资源，你配置的svg-url-loader和内置处理逻辑发生冲突，导致模块工厂插件加载异常，触发tap属性读取失败
2. 你的webpack配置中output字段缺失必填的filename输出命名规则，进一步导致HtmlWebpackPlugin的子编译器运行异常

解决方法 #

方案1：继续使用svg-url-loader

修改webpack配置的两处内容即可：

1. 补全output配置的必填字段：

output: { 
  path: path.resolve(__dirname, 'dist'),
  // 新增以下配置
  filename: '[name].[contenthash].js',
  clean: true // 可选配置，每次构建前自动清空dist目录
},

2. 调整svg规则，禁用webpack5内置的资源处理逻辑避免冲突：

{
  test: /\.svg$/,
  loader: 'svg-url-loader',
  // 新增以下两个配置
  type: 'javascript/auto',
  options: {
    esModule: false
  }
}

方案2：直接使用webpack5内置能力（更推荐）

Webpack5已经内置了静态资源处理能力，不需要额外安装svg-url-loader、url-loader，直接修改svg规则即可：

{
  test: /\.svg$/,
  // 小于8k的svg转base64内嵌，大于8k的单独输出文件，等价于之前的url-loader能力
  type: 'asset',
  parser: {
    dataUrlCondition: {
      maxSize: 8 * 1024
    }
  }
}

修改后可以卸载不需要的loader依赖：

npm uninstall svg-url-loader url-loader -D

如果修改完配置后仍然报错，执行以下命令更新HtmlWebpackPlugin到适配webpack5的最新版本即可：

npm i html-webpack-plugin@latest -D

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