GitHubに置いてあるVueのアプリケーション。先日、いつものようにdependabotが送り付けてくるプルリクエストを雑にマージしていると、突然CodePipelineからビルド失敗の通知が飛んできました。
ログ曰く
> flowerstand-frontend@1.0.2 build:prod /codebuild/output/src984942440/src/frontend/app
> vue-cli-service build --mode production
- Building for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
ERROR Failed to compile with 1 error5:29:44 PM
error in ./node_modules/vuetify/src/components/VAlert/VAlert.sass
TypeError: this.getOptions is not a function
@ ./node_modules/vuetify/lib/components/VAlert/VAlert.js 5:0-52
@ ./node_modules/vuetify/lib/components/VAlert/index.js
@ ./src/App.vue
@ ./src/main.ts
@ multi ./src/main.ts
ERROR Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! flowerstand-frontend@1.0.2 build:prod: `vue-cli-service build --mode production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the flowerstand-frontend@1.0.2 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-03-26T17_29_44_078Z-debug.log
このときにバージョンを上げたのはsass-loaderで、ログを見るにいかにもそれっぽい感じのこけ方をしています。メジャーバージョンが上がっていたのでリリースノートを確認すると
⚠ BREAKING CHANGES
minimum supported webpack version is 5
はい。
Vue2.xはまだwebpack4なので、sass-loaderのバージョンを落とします。
package.json
"sass-loader": "^10.1.1",
で
$ npm install
これで解決。
しかしsass周りってどうもトラブルが多い気がする・・・。