Vue packages version mismatch - vue.js

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

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 2

npm update fixed the same problem for me.

Answer 3

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