When running my unit tests in GitHub actions after upgrading to Vue 3, I get the following error:
> vue-cli-service test:unit
● Validation Error:
An unknown error occurred in #vue/cli-plugin-unit-jest:
Cannot resolve "#vue/vue3-jest" module. Please make sure you have installed "#vue/vue3-jest" as a dev dependency.
The GitHub actions script uses npm ci as its previous step to install dependencies, and the test command vue-cli-service test:unit works locally.
My package.json has:
"devDependencies": {
"#babel/core": "^7.16.7",
"#babel/eslint-parser": "^7.16.5",
"#babel/plugin-proposal-optional-chaining": "^7.14.5",
"#storybook/addon-a11y": "^6.4.12",
"#storybook/addon-actions": "^6.4.12",
"#storybook/addon-essentials": "^6.4.12",
"#storybook/addon-links": "^6.4.12",
"#storybook/addon-storysource": "^6.4.12",
"#storybook/vue": "^6.4.12",
"#testing-library/dom": "^7.31.2",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/user-event": "^13.2.1",
"#testing-library/vue": "^6.4.2",
"#vue/babel-preset-app": "latest",
"#vue/cli-plugin-babel": "~5.0.0-rc.2",
"#vue/cli-plugin-e2e-cypress": "~5.0.0-rc.2",
"#vue/cli-plugin-eslint": "~5.0.0-rc.2",
"#vue/cli-plugin-router": "~5.0.0-rc.2",
"#vue/cli-plugin-unit-jest": "^5.0.0-rc.1",
"#vue/cli-service": "~5.0.0-rc.2",
"#vue/cli-shared-utils": "^4.5.10",
"#vue/eslint-config-airbnb": "^6.0.0",
"#vue/preload-webpack-plugin": "^1.1.2",
"#vue/test-utils": "^2.0.0-rc.18",
"#vue/vue3-jest": "^27.0.0-alpha.4",
...
"babel-loader": "^8.2.2",
...
"jest": "^27.1.0",
"jest-extended": "^0.11.5",
"jest-junit": "^8.0.0",
...
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
},
and my jest.config.js matching the docs in using #vue/vue3-jest:
"transform": {
"^.+\\.vue$": "#vue/vue3-jest"
},
Please try it
# Vue 2
npm install --save-dev #vue/vue2-jest#28 # (use the appropriate version)
yarn add #vue/vue2-jest#28 --dev
# Vue 3
npm install --save-dev #vue/vue3-jest#28 # (use the appropriate version)
yarn add #vue/vue3-jest#28 --dev
Related
On a project, I try to npm install for the first time. But it tries to install the dependency "js-xlsx" but i can't see it in package.json
Moreover, it prints error and can't install it, and install nothing else .
The error when npm install :
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\mingw64\bin\git.EXE ls-remote -h -t https://github.com/securedeveloper/js-xlsx.git
npm ERR!
npm ERR! fatal: unable to access 'https://github.com/securedeveloper/js-xlsx.git/': Could not resolve host: github.com
npm ERR!
npm ERR! exited with error code: 128
Here is my package.json :
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^3.3.7",
"chart.js": "^2.4.0",
"create-react-class": "^15.6.3",
"fixed-data-table": "^0.6.3",
"jsx-to-string": "^1.0.2",
"lodash": "^4.17.5",
"moment": "^2.18.1",
"object-unfreeze": "^1.1.0",
"react": "^15.5.4",
"react-bootstrap": "^0.30.7",
"react-calendar-timeline": "^0.15.12",
"react-chartjs-2": "^2.1.0",
"react-data-export": "^0.4.2",
"react-dom": "^15.5.4",
"react-grid-layout": "^0.16.0",
"react-notification-system": "^0.2.16",
"react-redux": "^5.0.1",
"react-router": "^3.0.0",
"react-treebeard": "^2.0.3",
"redux": "^3.6.0",
"xhr": "^2.4.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-entry-webpack-plugin": "^1.0.0-beta.4",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"enzyme-adapter-react-15": "^1.0.5",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.6.1",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^23.1.0",
"jest-sonar-reporter": "^2.0.0",
"mini-css-extract-plugin": "^0.4.0",
"mock-local-storage": "^1.0.5",
"optimize-css-assets-webpack-plugin": "^4.0.2",
"react-css-modules": "^4.1.0",
"react-datetime": "^2.8.9",
"react-test-renderer": "^15.6.2",
"style-loader": "^0.16.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
},
Why does it try to install it ? Does it need it for another dependency ?
How can i solve this ?
So, I needed to configure not only the proxy of npm, but git also :
git config --global http.proxy http://proxyUsername:proxyPassword#proxy.server.com:port
git config --global https.proxy http://proxyUsername:proxyPassword#proxy.server.com:port
git config http.sslVerify false
sudo npm run serve
> frontend#1.0.0 serve /home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda
> vue-cli-service serve
INFO Starting development server...
12% building 20/21 modules 1 active ...rojetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/buildin/global.js/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226
throw new Error(
^
Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
at ProvidedDependency.set (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226:9)
at iterationDependencies (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/Compilation.js:940:21)
at factory.create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/Compilation.js:950:8)
at factory (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:409:6)
at hooks.afterResolve.callAsync (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:155:13)
at _fn0 (eval at create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
at fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:158:9)
at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:83:5)
at that.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
at CaseSensitivePathsPlugin.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:51:5)
at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:89:8)
at that.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
at Array.fs.readdir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:67:5)
at Storage.finished (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/enhanced-
resolve/lib/CachedInputFileSystem.js:55:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend#1.0.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend#1.0.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/shinier01/.npm/_logs/2020-11-10T18_21_27_165Z-debug.log
I tried to uninstall npm, vue and node, I deleted the .json files, but somehow nothing solves, and I always have this error when executing my command.
but this project is already running normally before, and now I gave an npm install and it updated the packages, but even if I give a roolbakc, or delete and install it again, nothing resolves.
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": ".....",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/cli": "^4.5.8",
"#vue/cli-service": "^4.5.8",
"axios": "^0.20.0",
"buefy": "^0.9.3",
"firebase": "^7.22.0",
"vue": "^2.6.12",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^6.3.0",
"css-loader": "^5.0.1",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^4.1.1",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^5.4.0",
"webpack-bundle-analyzer": "^4.1.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
can someone help me solve this error, please?
I faced the same problem and found a solution.
In my case application started using V5 of webpack and it was built on V4. You can run: npm i -D webpack#^4.0.0 to reverse it to V4 and it should fix it.
Special thanks to Mark:
https://forum.layer0.co/t/error-module-property-was-removed-from-dependency/208
I am trying to deploy an vue app in AWS amplify.
Below is my build configuration-
version: 0.1
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run production
artifacts:
baseDirectory: dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
My package.json in the vue app -
{
"name": "foobar",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "./bin/web.js",
"serve": "vue-cli-service serve --mode development",
"production": "vue-cli-service build --mode production",
"sandbox": "vue-cli-service build --mode sandbox",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"bignumber.js": "^8.0.1",
"bootstrap": "^4.3.1",
"connect-history-api-fallback": "^1.5.0",
"cors": "^2.8.5",
"currency-formatter": "^1.5.3",
"ethereum-blockies": "^0.1.1",
"ethereum-blockies-base64": "^1.0.2",
"express": "^4.16.4",
"from-now": "^1.0.2",
"jquery": "^3.3.1",
"lodash": "^4.17.11",
"moment": "^2.22.2",
"popper.js": "^1.14.7",
"socket.io-client": "^2.3.0",
"vue": "^2.5.17",
"vue-axios": "^2.1.4",
"vue-multiselect": "^2.1.4",
"vue-router": "^3.0.1",
"vuejs-paginate": "^2.1.0",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.2.0",
"#vue/cli-plugin-eslint": "^3.2.0",
"#vue/cli-plugin-unit-mocha": "^3.2.0",
"#vue/cli-service": "^3.2.0",
"#vue/test-utils": "^1.0.0-beta.20",
"babel-eslint": "^10.0.1",
"chai": "^4.1.2",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-cli-plugin-bootstrap": "^1.0.0-alpha.1",
"vue-template-compiler": "^2.5.17"
}
}
In the build step it's failing, so I pulled up the log and saw following error-
2020-03-25T06:37:48.522Z [WARNING]: sh: vue-cli-service: command not
found
Why the error? vue-cli-service is there in the dev dependencies.
A quick fix that did work for me is to install #vue/cli-service globally with this command npm install -g #vue/cli-service
Also make sure your npm install command runs in NODE_ENV=development otherwise devDependencies won't be installed.
You may want to use npm ci or to trash your node_modules, at least once just as a test. Seems like most CICD systems hitting this issue were resolved by destroying the node_modules artifact: https://github.com/vuejs/vue-cli/issues/2404
Is the vue-cli-service not intended only to be used for development? Amplify is not going to serve your content from that service, its a development dependency which you would use to run locally during development. I think you don't want a "start" script there at all as Amplify would look in your public folder and serve the index.html file there.
I am simply trying to follow a tutorial which tells me to install both node-sass and sass-loader. When I do I get the following error:
ERROR Failed to compile with 1 errors 6:21:28 PM
error in ./src/components/TodoList.vue
Module build failed: TypeError: this.getResolve is not a function
at Object.loader (C:\xampp\htdocs\projects\todo-vue\node_modules\sass-loader\dist\index.js:52:26)
# ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3de47834","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/TodoList.vue 4:14-377 13:3-17:5 14:22-385
# ./src/components/TodoList.vue
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
My package.json file
{
"name": "todo-vue",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Jethro Hazelhurst <j.hazelhurst1994#gmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"vue": "^2.5.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^3.2.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^2.2.0",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
My Vue file where I am setting <style lang="scss">
<template>
<div>
<input type="text" class="todo-input" placeholder="What needs to be done">
Todo list goes here
</div>
</template>
<script>
export default {
name: 'todo-list',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style lang="scss">
</style>
No idea where I am going wrong here.
You have "webpack": "^3.12.0" and "sass-loader": "^8.0.0", which I believe is incompatible (as discussed in this Github issue).
To solve the problem, either upgrade webpack to version 4 or downgrade sass-loader to version 7 (which, personally, is what I did).
Downgrading from sass-loader 8.0.0 to 7.3.1 fixed it for me on new builds with Webpack 4.4.0.
Resources:
Github Issue Tracker: https://github.com/webpack-contrib/sass-loader/issues/761
Github Solution: https://github.com/webpack-contrib/sass-loader/issues/761#issuecomment-554608680
new fish here, doing the same tutorial!
At the beginning after "npm run dev", there are warnings like
sass-loader#^x.x.x found but y.y.y expected.
webpack#^x.x.x found but y.y.y expected.
for those searching npm downgrade commands:
uninstall
e.g.
npm uninstall sass-loader
install the expected version (change y.y.y to your expected version)
npm install sass-loader#^y.y.y --save-dev
I ran this in my project root folder, and then the tutorial worked (however, under localhost:3000/todo)
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?)$"
}
}
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
npm update fixed the same problem for me.
Add the following lines to your Package.json
"vue-template-compiler": "^2.6.12"
and then run npm install in terminal.