Vue2からVue3への移行で Error: Can't resolve 'vue'

609, 2022-12-26

Vue2からVue3への移行

Vue2を使ってずいぶんたくさんアプリを作った。
20個ぐらい作った。
それでVue3にアップグレードしている。20個全部。

私はライブラリのメジャーバージョンを移行させる仕事はあまりしたことがないので、軽く考えていた。
ちょっと大変だろうけどすぐできるだろう。と。

しかし実際にやってみるとめちゃくちゃ大変である。
これはVue2からVue3に移行している間にVue4が出てしまう勢いである。

しばらく放置して他のことをやっていたのだが、年末になって重い腰を上げて取り組むようにした。
この記事はそのログである。

Vue2からVue3に移行させる場合、一番変更点が多いのがアプリの作成やマウント処理である。
これはインターフェースがだいぶ変わっていてがっつり変えないと行かない。
後方性互換をいっさい切り捨てるフロントエンドの鏡のような存在、Vue.

その男らしい振る舞いにすべての開発者は振り回され大切な休日を消費される。
だがライブラリ開発者からすれば「そんなに不満があるならReact使えば？」と言いたいところだろう。

じっさいReactでリプレースを考えたこともある。
だがそれはコストが高すぎる。
20個のVueアプリをすべてReactアプリにするというのは修羅の道である。

そんなことをするぐらいならスクワットでもして身体を鍛えた方が良い。

ほかにもVue3はいろいろ細かい変更点があり、それらの変更に対応しなければならない。
具体的には↓の記事がよくまとまっていた。

Vue2からVue3への移行作業の切なさといえば、バージョンが上がればこの作業も過去のものになるということである。
つまりこの作業は刹那的な作業なのだ。
なにかを蓄積する作業ではない、瞬間的なものだ。
だがこれに対応しないとレガシーなシステムになってしまう。

そういう意味でシステムの維持というのは恒久的というよりは刹那的な瞬間が積み重なっているものと言っていいだろう。
プログラマーは刹那的なその瞬間に生きている儚い生き物なのだ。

Vue2からVue3への移行でエラーが出ている。

// main.js
import { createApp } from 'vue'

というVue3用のコードを書くと

    Module not found: Error: Can't resolve 'vue' in '/

が出るため解決するために

    externals: {
        'vue': 'Vue',
    }

をwebpack.config.jsに追加すると
（参考：Can't resolve 'vue' - Get Help - Vue Forum）

    Uncaught ReferenceError: Vue is not defined

が出る。
そもそもなぜ

import { createApp } from 'vue'

のコードが通らないのか。
これは環境構築が間違っているんじゃないのか？
つまりwebpack.config.jsが間違っている。

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
    }
}

としてみた。
するとエラーが出なくなった。

あとは細かい仕様変更に関する修正をちょいちょいとやった。
さいわいそれほど影響はなかった。
またVue3に対応していないライブラリもあってこれの取り換えも必要だった。

たとえばvue-toastedはVue3に対応していないためこれのリプレースが必要になる。
今回は自作のライブラリであるminitoastを作って対応した。

このライブラリはかなり最小限のライブラリでほとんど機能がない。
だが軽量であるため私は気に入っている。
動けばいいのだの精神である。

メインに使っているライブラリのメジャーバージョンのアップグレードだが私はこれが初めてかもしれない。
だがなんとかなったので良かった。
時間はかかってしまったが。

今年中に終わらせることができてほっとしている。
これでまたアプリ開発を続けることができる。

だがまた来年にはVue4が出るだろう。
そうするとまたバージョンを上げなければならない。
なんともはや大変な話である。
レガシーなVueを使い続ける道もあるが、修正作業が大したことがなければアップグレードしたほうがメリットが多い。

今年はYoutubeに力を入れていたがこちらは1000人行かなかった。
かなり収益化の面からすると厳しいと思う。

ソフトウェア販売は最近になってぽつぽつ売れ出している。
このままソフトウェアの宣伝に力を入れていきたい。

今年一年お疲れさまでした。