npm run devでエラーになった時にやった事

状況

Vue.jsやNode.jsは全くの初心者。
プライベートでVueを使う必要が出てきたので、プロジェクトをクローンして動かそうとしたところ、エラーとなりハマったので備忘としてやった事を書いていく。（間違っている方法かもなのでご容赦ください。）

エラー内容

npm run devを実行した際にエラー。

$ npm run dev
....(省略)....

 ERROR  Failed to compile with 2 errors                                                                                                                                           friendly-errors 10:04:04

Module Error (from ./node_modules/vue-loader/lib/index.js):                                                                                                                       friendly-errors 10:04:04

Vue packages version mismatch:

- vue@2.6.6 (/Users/******/node_modules/vue/dist/vue.runtime.common.js)
- vue-template-compiler@2.6.10 (/Users/******/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.

friendly-errors 10:04:04
Module build failed (from ./node_modules/vue-loader/lib/index.js):                                                                                                                friendly-errors 10:04:04
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (/Users/******/node_modules/@vue/component-compiler-utils/dist/parse.js:14:23)
    at Object.module.exports (/Users/******/node_modules/vue-loader/lib/index.js:67:22)

....(省略)....

よく分からないので、とりあえず調べる。

参考記事

• [Vue.js]npm run devのエラー解決方法[vue-cli]
• Vue packages version mismatchがでた場合
• How do I fix a “Vue packages version mismatch” error on Laravel Spark v4.0.9?

やった事

エラーになった時の↓の文言に対応方法っぽい事が書いてあった。

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-loaderのバージョンによって対応方法が違うもよう。
vue-loaderのバージョンを確認してみる。

$ npm info vue-loader version
15.7.1

10.0以上なので、vue-template-compilerをupdateしてみる。

$ npm update vue-template-compiler

しかし、エラーは解消せず。
エラー文言を読んでいくと、以下のように書かれていたので、

 WARN  node-fetch@^2.6.0 is recommended but node-fetch@1.7.3 is installed!
 WARN  vue@^2.6.10 is recommended but vue@2.6.6 is installed!

対象のバージョンにしてみる。

$ npm i vue@2.6.10
$ npm i node-fetch@2.6.0

すると解決。