【解決】久々にvue createしたら「Vue packages version mismatch」エラーで詰まった

f:id:osushi_engineer:20200726224609p:plain

hisacomです。

久々にVue.jsの勉強をしようかと思い、Vue CLIでプロジェクトを作成するためにvue create <project-name>をしたら「Vue packages version mismatch」のエラーで詰まってしまいました。

ネットで検索してみると同様のエラーで困っている方もいるようだったので、自分の解消法をメモしておきます。

本記事のスコープ

「Vue packages version mismatch」のエラーを解消し

vue create <project-name>でVue.jsのプロジェクトを作成し、yarn serveでローカル実行できるところまでを確認します。

実行環境

OS：Mac OS
node： v14.6.0
yarn： 1.22.4

エラー内容

　USER_NAME@hisacom workspace % vue create hello-world
　/Users/USER_NAME/.config/yarn/global/node_modules/vue-template-compiler/index.js:10
 　throw new Error(
　 ^

　Error:

　Vue packages version mismatch:

　- vue@2.5.17 (/Users/USER_NAME/.config/yarn/global/node_modules/vue/dist/vue.runtime.common.js)
　- vue-template-compiler@2.6.11 (/Users/USER_NAME/.config/yarn/global/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.

エラー内容をそのまま見ると、global内のpackageでvueとvue-template-compilerのバージョンが食い違っているのでバージョンを合わせろと注意されています。しかし私のエラー原因は違ったようでvueのアップデートを試しても解決はできませんでした（アップデートはyarn upgrade vue-template-compilerを行えば実行できます）

ネットで原因を探っていると~/.config/yarn/global/node_modules/の中にvueが存在するためにエラーが発生しているとの情報がありました。何らかのタイミングでglobalの中にvueをインストールしてしまったようです。

参考サイト：

github.com