Error using Sentry/webpack-plugin with sourcemaps in Vue.js2 + Webpack4: How to solve 'compilation.updateAsset is not a function'?

Hi i want to connect sourcemaps to Sentry. So installed sentry/webpack-plugin But Got Errors. I don't know how to solve it. T.T

Environment : 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, }), ], },
...

When I added sourcemaps ' assets attributes got this Error

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), <anonymous>: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), <anonymous>: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), <anonymous>: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), <anonymous>:9:1) at eval (eval at create (C:\Users\pc\workspace\skt-grems-frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>: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)

How can i handle this error without upgrade webpack 5??

1 Answer

I think this might relate to this issue

• According to this release notes of webpack at v4.40.0

• new methods allow easy emitting/updating of assets (instead of accessing the Object compilation.assets)

• You should try to update webpack to 4.40.0