Vue packages version mismatch

Question

I'm trying to add unit testing to an existing vue project via jest, but when I attempt to run my first test I get an error that says

Vue packages version mismatch:

- vue@2.5.16
- vue-template-compiler@2.6.6

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.

But looking at my packages, my current vue version is 2.6.6 not 2.5.16. I have no idea where it's seeing this 2.5.16 version. I don't have vue installed globally, only @vue/cli@3.4.0. Any help would be appreciated. Below you can find my package.json that contains my jest configuration.

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.4.0",
    "@tinymce/tinymce-vue": "^1.1.0",
    "@types/bootstrap": "^3.3.40",
    "@types/jest": "^24.0.11",
    "@types/jquery": "^2.0.51",
    "@types/jquery.validation": "^1.16.5",
    "@types/jqueryui": "^1.12.6",
    "@types/kendo-ui": "^2018.3.0",
    "@types/knockout": "^3.4.60",
    "@types/moment": "^2.13.0",
    "axios": "^0.18.0",
    "axios-cache-adapter": "^2.1.1",
    "browser-detect": "^0.2.28",
    "es6-promise": "^4.2.5",
    "file-saver": "^1.3.8",
    "knockout": "^3.4.2",
    "moment-timezone": "^0.5.23",
    "query-string": "^6.2.0",
    "tinymce-vue": "^1.0.0",
    "url-search-params-polyfill": "^5.0.0",
    "vee-validate": "^2.1.3",
    "vue": "^2.6.6",
    "vue-class-component": "^6.3.2",
    "vue-multiselect": "^2.1.3",
    "vue-notification": "^1.3.13",
    "vue-property-decorator": "^7.2.0",
    "vue-router": "^3.0.2",
    "vuejs-datepicker": "^1.5.4",
    "vuex": "^3.0.1",
    "vuex-persistedstate": "^2.5.4"
  },
  "scripts": {
    "dev": "webpack --mode development --watch --hot",
    "test": "npm run test:unit",
    "test:unit": "jest",
    "build": "webpack --mode production",
    "output": "webpack --profile --json > stats.json"
  },
  "devDependencies": {
    "@types/file-saver": "^1.3.1",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^6.26.3",
    "babel-jest": "^24.7.1",
    "babel-loader": "^8.0.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^1.0.1",
    "hard-source-webpack-plugin": "^0.13.1",
    "jest": "^23.4.2",
    "node-sass": "^4.10.0",
    "printd": "^1.0.1",
    "sass-loader": "^7.1.0",
    "ts-jest": "^23.10.5",
    "ts-loader": "^4.5.0",
    "typescript": "^3.2.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "vue-jest": "^3.0.4",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.6.6",
    "webpack": "^4.28.4",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-cli": "^3.1.2",
    "webpack-hot-middleware": "^2.24.3"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "ts",
      "json",
      "vue"
    ],
    "moduleDirectories": [
      ".",
      "<rootDir>/Scripts",
      "<rootDir>/Scripts/VueModules",
      "<rootDir>/Scripts/VueModules/SharedComponents",
      "<rootDir>/Scripts/VueModules/Candidates/",
      "node_modules"
    ],
    "moduleNameMapper": {
      "^@candidates$": "<rootDir>/Scripts/VueModules/Candidates",
      "^@shared$": "<rootDir>/Scripts/VueModules/SharedComponents",
      "^@app$": "<rootDir>/Scripts/VueModules",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/Scripts/VueModules/__mocks__/fileMock.js",
      "\\.(css|less|scss|sass)$": "<rootDir>/Scripts/VueModules/__mocks__/styleMock.js"
    },
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.tsx?$": "ts-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!vue)"
    ],
    "testURL": "http://localhost/",
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
  }
}

Answer 1

in my case yarn upgrade solved the issue

Answer 2

Add the following lines to your Package.json "vue-template-compiler": "^2.6.12" and then run npm install in terminal.

Answer 3

You have "vue": "^2.6.6", and "vue-template-compiler": "^2.6.6", in your package.json meaning any version matching 2.6.6 or higher will be installed that explain the vue@2.5.16. Your package-lock.json file set the current version to which the package has been updated to, you can verify from there which version both vue and vue-template-compiler

You can run npm update or npm install vue-template-compiler@2.5.16 --save-dev to get both on the same version

Running the following command helped me

npm install vue-template-compiler@2.5.16 --save-dev

NB. Replace the version number with the right version that you need. In my case, the version of vue was 2.5.16 and vue-template-compiler was 2.5.13 hence I updated the vue-template-compiler to the version of the vue.

Hope this helps someone

Vue packages version mismatch error fix

Answer 4

npm update fixed the same problem for me.