Preview Log repeats to reload (Vue packages version mismatch error)

Targets

• Projects who use Vue.js and libraries that depend on Vue.js (such as vue-template-compileror vue-loader ) and do not have fixed versions in package.json

Incident

• The following error causes the preview log to reload repeatedly.

[webpack-cli] Error:

Vue packages version mismatch:

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.

Cause

• If a minor version of a Vue.js related library such as vue-template-compiler or vue-loader is updated and there is an inconsistency with the version of Vue.js used in the project, the above error will occur.

How to fix it

• Open package.json and fix the version by removing^from the versions of Vue.js and related libraries defined in devDependencies and dependencies.

  "dependencies": {
    ・・・
    "vue": "^2.6.14",
    "vue-onsenui": "^2.6.4"
    ・・・
  },
  "devDependencies": {
     ・・・
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    ・・・
  }

↓

  "dependencies": {
    ・・・
    "vue": "2.6.14",
    "vue-onsenui": "2.6.4"
    ・・・
  },
  "devDependencies": {
     ・・・
    "vue-loader": "15.9.8",
    "vue-template-compiler": "2.6.14",
    ・・・
  }

• Execute Project Recovery from the Preview Log.