Nuxtをアップデートしたらvue-template-compilerのバージョン違いでエラーが発生したので解消する

発生経緯

Nuxtのバージョンを 2.14.12 から 2.15.8 に更新したら正常にビルドできなくなりました。
今回のイレギュラー要素として、ここに至るまでにDependabotでNuxtに付随するライブラリを先にいくつか更新していました。おそらくこれで予期せぬバージョンの食い違いが起こってしまった可能性が。

現象

nuxt start の実行に問題がなかったので nuxt build すると以下のエラーメッセージが。

ERROR in ./.nuxt/components/nuxt-error.vue
Module build failed (from ./node_modules/@nuxt/components/dist/loader.js):
Error:

Vue packages version mismatch:

- vue@2.6.12 (/project/node_modules/vue/dist/vue.runtime.common.js)
- vue-template-compiler@2.6.14 (/project/node_modules/@nuxt/components/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

あらやだこれ昔Vueをアップデートしたときも見たやつですわ。

yarn.lock を削除す……しない

Vue packages version mismatch: で検索するといくつも情報が見つかります。
手っ取り早い解消法が yarn.lock を削除して yarn install しなおすこと。
でもちょっとお気軽にできませんこれは。というのも個人プロダクトならともかく、今回は既にリリース済みの商用プロダクト。他のライブラリまで一気に更新されてしまうと影響範囲が大きくなりすぎてしまって何かあったときにヤバい。言い訳が思いつかない。
試しにやってみたら、今回の場合はprettierとjestのメジャーバージョンがひとつ上がり、今まで通っていたlintとテストが落ちるようになってしまいました。
さすがにここで lint --fix してソースに差分を大量に残すのはちょっと……プルリクひとつに突っ込むには大きすぎるのでこの方針はやめました。

vue と vue-template-compiler のバージョンを揃えたい

Vue Packageのversionの違いによるエラーを解消する を参考にさせていただけば問題なくエラーを解消できます。以前もこれでいけた。
具体的には vue と vue-template-compiler のバージョンを揃えれば良いわけです。
エラーメッセージにも simply update vue-template-compiler. と書いてあるとおりですし。大丈夫大丈夫。とりあえず現状把握を

yarn why vue-template-compiler
yarn why v1.22.11
[1/4] 🤔  Why do we have the module "vue-template-compiler"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "vue-template-compiler@2.6.12"
info Has been hoisted to "vue-template-compiler"
info Reasons this module exists
   - Hoisted from "nuxt#@nuxt#vue-app#vue-template-compiler"
   - Hoisted from "nuxt#@nuxt#webpack#vue-template-compiler"
info Disk size without dependencies: "444KB"
info Disk size with unique dependencies: "600KB"
info Disk size with transitive dependencies: "600KB"
info Number of shared dependencies: 2
=> Found "@nuxt/components#vue-template-compiler@2.6.14"
info This module exists because "nuxt#@nuxt#components" depends on it.
info Disk size without dependencies: "444KB"
info Disk size with unique dependencies: "600KB"
info Disk size with transitive dependencies: "600KB"
info Number of shared dependencies: 2
✨  Done in 0.86s.

おおっと？ vue-template-compiler が2バージョンいましてよ？

yarn.lock を覗いて現状のバージョンを確認しますと、

• @nuxt/vue-app@2.15.8 が vue-template-compiler@2.6.12 以上を求めている
• @nuxt/components@^2.2.1 が vue-template-compiler@2.6.14 以上を求めている
• 今入っている vue は 2.6.12

という状態。思い思いの vue-template-compiler がお呼ばれしている……困る……
とはいえ違いがパッチバージョンですのでここは新しい方に合わせ、

• vue-template-compiler は 2.6.14 を生かして 2.6.12 を削除
• vueと関連ライブラリを 2.6.14 に更新

という方針でよさそうです。

nuxtをupgradeしなおして対応

たいへん回り道してしまいましたが、

yarn upgrade nuxt

で解消できました。小出しに更新しないで最初からこうしとけばよかったですねえ。

あるいは変更を本当に最小限にとどめたい場合なら、あまり望ましくはありませんがyarn.lockを直接編集しても解消できます。
vue（と必要なら周辺ライブラリ）のversionを2.6.14に書き換えてから

yarn install --check-files

すればOKです。
yarn.lockやpackage-lock.jsonを保守し続けるのは正直しんどいときもあるのですが、なるべく守っていきたいものです。