Vue.js2+Webpack4集成Sentry插件遇compilation.updateAsset错误求解决

环境信息 #

• Vue.js 2.6.10
• Webpack 4.28.4

vue.config.js 配置 #

const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
const path = require('path');

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  publicPath: '/grems/',
  outputDir: 'my-dist',
  // productionSourceMap: false,
  pluginOptions: {
    i18n: {
      locale: 'ko',
      fallbackLocale: 'ko',
      localeDir: 'locales',
      enableInSFC: true,
    },
  },

  configureWebpack: {
    entry: ['babel-polyfill', './src/main.js'],
    output: {
      filename: '[name].[hash:8].js',
      sourceMapFilename: '[name].[hash:8].js.map',
    },
    devtool: 'source-map',
    plugins: [
      sentryWebpackPlugin({
        org: process.env.SENTRY_ORG,
        project: process.env.SENTRY_PROJECT,
        authToken: process.env.SENTRY_AUTH_TOKEN,
        sourcemaps: {
          assets: [path.join(__dirname, 'my-dist/js')],
          ignore: ['./node_modules', 'vue.config.js'],
        },
        debug: true,
      }),
    ],
  },
...

报错信息 #

92% chunk asset optimization BannerPlugin ERROR TypeError: compilation.updateAsset is not a function
TypeError: compilation.updateAsset is not a function
at C:\Users\pc\workspace\skt-grems-frontend\node_modules\webpack-4\lib\BannerPlugin.js:111:19
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\pc\workspace\skt-grems-frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), :14:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\pc\workspace\skt-grems-frontend\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\pc\workspace\skt-grems-frontend\node_modules\webpack\lib\Compilation.js:1309:36
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\pc\workspace\skt-grems-frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), :9:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\pc\workspace\skt-grems-frontend\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\pc\workspace\skt-grems-frontend\node_modules\webpack\lib\Compilation.js:1305:32
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\pc\workspace\skt-grems-frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), :9:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\pc\workspace\skt-grems-frontend\node_modules\tapable\lib\Hook.js:154:20)
at Compilation.seal (C:\Users\pc\workspace\skt-grems-frontend\node_modules\webpack\lib\Compilation.js:1242:27)
at C:\Users\pc\workspace\skt-grems-frontend\node_modules\webpack\lib\Compiler.js:550:17
at _done (eval at create (C:\Users\pc\workspace\skt-grems-frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), :9:1)
at eval (eval at create (C:\Users\pc\workspace\skt-grems-frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), :48:22)
at C:\Users\pc\workspace\skt-grems-frontend\node_modules\webpack\lib\Compilation.js:1093:12
at C:\Users\pc\workspace\skt-grems-frontend\node_modules\webpack\lib\Compilation.js:1005:9
at processTicksAndRejections (node:internal/process/task_queues:78:11)

这个错误的核心原因是新版@sentry/webpack-plugin（v2及以上）仅支持Webpack 5，和你用的Webpack 4 API不兼容。不用升级Webpack的话，按以下步骤解决：

1. 降级插件版本 #

卸载当前插件，安装兼容Webpack 4的v1.x稳定版：

npm uninstall @sentry/webpack-plugin
npm install @sentry/webpack-plugin@1.24.2 --save-dev

2. 调整配置文件 #

v1版本的插件导入和配置项和v2不一样，修改vue.config.js：

// 导入方式变更
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
const path = require('path');

module.exports = {
  // ...其他原有配置
  configureWebpack: {
    // ...其他原有配置
    plugins: [
      new SentryWebpackPlugin({
        org: process.env.SENTRY_ORG,
        project: process.env.SENTRY_PROJECT,
        authToken: process.env.SENTRY_AUTH_TOKEN,
        // 替换原sourcemaps.assets为include
        include: path.join(__dirname, 'my-dist/js'),
        // ignore直接放在根配置下
        ignore: ['./node_modules', 'vue.config.js'],
        debug: true,
      }),
    ],
  },
};

3. 验证 #

执行打包命令，确认报错消失，同时Sentry能正常接收sourcemap文件即可。

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