Vue 2.6から2.7へのアップデートで直面したエラーのメモ

ハコベル株式会社でフロントエンドエンジニアをしている大川です。

少し前ですがハコベル配車管理のUIをVue 2.6からVue 2.7にアップデートしたので、そのときに直面したエラーを共有していきます。

フロントエンド構成と利用バージョン

ハコベル配車管理のUIは2021年にRuby on Railsのモノリシック構成から
フロントエンド・バックエンドでリポジトリを分ける構成に刷新された歴史があります。

参考: Docker + Fastify + webpack-dev-server によるフロントエンド開発環境

ページとアセットのルーティングはFastifyで行っており、各エントリポイントごとのアセットをVue CLIでバンドルしています。
今回のアップデート作業で特に影響することはありませんでしたが、一応補足として書いてます。

アップデート前のVueとVue CLIのバージョンは以下の通りです。

• Vue: v2.6.8
• Vue CLI: 4.5.17

Vue 2.7へのアップデート（参考にした文書の紹介）

アップグレードの手順については公式ドキュメントとLAPRASさんの記事を参考にしました。

• Migration to Vue 2.7 | Upgrade Guide
• Vue2.7アップグレード最強ガイド

LAPRASさんの記事に出てきたリアクティブな変数の名前でのエラーは作業前前に把握できて大変助けられました。

作業自体は上記で書かれていること以外に追加で実施した作業はないです。
（ついでにnode-sassをDart Sassに移行したりもしましたが）細かい作業手順は割愛します。

エラー対応

移行手順の対応ができたあとに自分が直面したビルドエラーを、エラーメッセージとともにメモしておきます。

Setup Contextの参照

setup関数でContextのrootプロパティを参照していると以下のようなエラーメッセージが出ます。

Property 'root' does not exist on type 'SetupContext<{}>'.

Vue 2.7以前からdeprecatedになっていましたが自分たちの環境では該当コードが残っていました。

nextTickはAPIが切り出されたのでimportして利用します。

- import { computed, defineComponent, PropType, ref } from 'vue'
+ import { computed, defineComponent, PropType, ref, nextTick } from 'vue'

// nextTick利用箇所
-      ctx.root.$nextTick(() => {
+      nextTick(() => {

vue-routerは3.6.0からコンポーザブルが用意されているのでそちらを利用しました。
参考: vue-routerの3.6.0リリースノート

他の外部ライブラリや自前のプラグインはコンポーザブルを用意しました。
LAPRASさんの記事でも紹介されている内容です。
参考: Vue2 Composition API でのVue Router3系の使い方

// 自前のローディング表示用プラグインを利用するためのコンポーザブルを定義
import { getCurrentInstance } from 'vue'

export const useLoading = () => {
  const vm = getCurrentInstance()
  if (!vm) {
    throw new Error(`Should be used in setup().`)
  }
  return vm.proxy.$loading
}

// setup関数内
nextTick(() => { /** 略 */})

methodsが定義されてないことになる

Options APIとsetup関数を組み合わせているコンポーネントで以下のようなエラーが発生しました。

（someMethodNameはサンプル用の適当なメソッド名です）

Property 'someMethodName' does not exist on type 'CreateComponentPublicInstance<{}, /** 略 */ >'.

以下のissueコメントの通りdataプロパティをアロー関数で定義すると解決できました。
参考: [2.7.x] [typescript] Type inference breaks under specific circumstances #12628

その他型エラー

TypeScriptの型情報まわりが改善されたことで検知できるようになったエラーは1つずつ型情報を修正して対応しました。

まとめ

この記事ではVue 2.7へのアップデートに役立つ文書と直面したエラーを共有しました。
どなたかのお役に立てれば幸いです。

アップデートの作業自体難しいものではなく、他のタスクやミーティングをしつつ7営業日くらいでできました。

もちろん、今後も引き続きVue CLI 4系からの移行やVue 2系のEOLに向けてアップデートを予定しています。
その中でなにかシェアできることがあればまた記事にしていきます。