Vue packages version mismatch: エラーを確認 -> 解消する

vue と vue-server-renderer で version mismatch

先日Nuxtプロジェクトで npm run dev を実行した際に、下記エラーが表示されました。

 ✖ Nuxt Fatal Error  
 Error:    
 Vue packages version mismatch:   
 - vue@2.6.11    
 - vue-server-renderer@2.6.14    
 This may cause things to work incorrectly. Make sure to use the same version for both. 

原因

エラー文を見ると

This may cause things to work incorrectly. Make sure to use the same version for both.      

と書いてあります。簡単にいうと、
「vueとvue-server-rendererのバージョンを合わせないといけないよ！」とのこと。

現在は下記バージョンになっています。

 - vue@2.6.11    
 - vue-server-renderer@2.6.14  

• vue：2.6.11
• vue-server-renderer：2.6.14

確かにバージョンがあっていません。

解決方法

今回は、低い方のvueのバージョンを上げることで解決します。
下記実行します。

npm i vue

以上です。

vue と vue-template-compiler で version mismatch

上記完了後、再度npm run dev を実行すると続いて下記のエラーが表示されました。

Error:
  
  Vue packages version mismatch:
  
  - vue@2.6.14 (node_modules/vue/dist/vue.runtime.common.js)
  - vue-template-compiler@2.6.11 (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 と vue-template-compilerのバージョンが違うようです。

  - vue@2.6.14 (node_modules/vue/dist/vue.runtime.common.js)
  - vue-template-compiler@2.6.11 (node_modules/vue-template-compiler/package.json)

解決方法

今回はvue-template-compilerのバージョンをあげることで解決します。
下記実行します。

npm install vue-template-compiler

以上です。

再度 npm run dev したら無事実行されました。