Related
I having vuejs-3 project and I am looking for 0 vulnerabilities. When I do npm install I am getting 48 vulnerabilities with current version node and npm. Even if I try npm audit fix --force still Issue is the same. Can someone help me please?
C:\Users\achalapa\git\cnsr-odrplat-wcm-cld-vue\mcafee-consumer-wcm-cld-vue.lib> npm install
-npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
-npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
-npm WARN deprecated har-validator#5.1.5: this library is no longer supported
-npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
-npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
-npm WARN deprecated html-webpack-plugin#3.2.0: 3.x is no longer supported
-npm WARN deprecated uuid#3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
-npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
-npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
-npm WARN deprecated #hapi/joi#15.1.1: Switch to 'npm install joi'
-added 923 packages, and audited 1694 packages in 4m
-105 packages are looking for funding
run `npm fund` for details
-48 moderate severity vulnerabilities
-To address issues that do not require attention, run:
npm audit fix
-To address all issues (including breaking changes), run:
npm audit fix --force
48 Vulnerabilities are coming out when we
add below packages
*"#vue/cli-plugin-babel": "~4.5.13",
"#vue/cli-plugin-typescript": "~4.5.13",
"#vue/cli-plugin-vuex": "~4.5.13",
"#vue/cli-service": "4.5.13",*
Is this okay to proceed?
Is this harmful for my project?
package.json
{
"name": "mcafee-consumer-wcm-cld-vue.lib",
"version": "1.0.0",
"private": true,
"sideEffects": false,
"scripts": {
"bundle": "set NODE_ENV=production && npm run lint && webpack --config webpack.dlp.js --progress --mode=production",
"bundle-dev": "set NODE_ENV=development && npm run lint && webpack --config webpack.dlp.js --progress --mode=development",
"lint": "eslint . --ext .ts,.js --ignore-pattern src/**/*.d.ts",
"lint-and-fix": "eslint . --ext .ts --fix"
},
"dependencies": {
"#vuelidate/core": "^2.0.0-alpha.18",
"bootstrap": "^5.0.1",
"core-js": "^3.13.0",
"intersection-observer": "^0.12.0",
"vue": "^3.0.0",
"vuex": "^4.0.0-0",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"#babel/core": "^7.14.3",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-arrow-functions": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/preset-env": "^7.14.2",
"#babel/preset-typescript": "^7.13.0",
"#types/bootstrap": "^5.0.15",
"#types/core-js": "^2.5.4",
"#types/lodash": "^4.14.170",
"#typescript-eslint/eslint-plugin": "^4.25.0",
"#typescript-eslint/eslint-plugin-tslint": "^4.25.0",
"#typescript-eslint/parser": "^4.25.0",
"#vue/cli-plugin-babel": "~4.5.13",
"#vue/cli-plugin-typescript": "~4.5.13",
"#vue/cli-plugin-vuex": "~4.5.13",
"#vue/cli-service": "4.5.13",
"#vue/compiler-sfc": "^3.0.11",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"babel-loader": "^8.2.2",
"babel-preset-typescript-vue3": "^2.0.12",
"clean-webpack-plugin": "^3.0.0",
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-jsdoc": "^35.0.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.9.0",
"fork-ts-checker-webpack-plugin": "^3.1.1",
"html-webpack-plugin": "^5.3.1",
"prettier": "^2.3.0",
"terser-webpack-plugin": "^5.1.2",
"ts-loader": "^9.2.2",
"tslint": "^6.1.3",
"typescript": "^4.3.2",
"typescript-tslint-plugin": "^1.0.1",
"vue-loader": "^16.2.0",
"webpack": "^5.37.1",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.7.0",
"webpack-merge": "^4.1.4"
}
}
If all vulnerabilities are coming only from those 4 packages - ie. vue/cli, than you can safely ignore it as only place where this code will be executed is on your own machine during development and build. If we agree that we trust the creators of Vue CLI that they do not use those vulnerable packages in a way harmful to their customers (developers using Vue CLI), we can safely ignore those warnings as no code from these packages will be included in the app bundle....
What interests you is only vuln. of packages included in dependencies part of package.json as this is code that will make it to the final app bundle and will be downloaded and executed by our users/customers
Use this command instead: npm audit --only=prod
npm prune worked for me!
I had an extraneous package installed with npm install #vue/cli -g called subscriptions-transport-ws which was no longer maintained and used a bunch of deprecated packages.
After the prune, I checked and it was gone using npm ls subscriptions-transport-ws. I also had no vulnerabilities anymore.
For anyone getting vulnerability warnings from #vue/cli:
#vue/cli is now in maintenance mode and it is recommended to create projects using create-vue
From their site:
⚠️ Vue CLI is in Maintenance Mode!
For new projects, it is now recommended to use create-vue to scaffold Vite-based projects. Also refer to the Vue 3 Tooling Guide for the latest recommendations.
$ npm create vue#3
This should properly deal with the npm audit warnings at which point you should have none from vue.
Does this happens when you are trying to create the project if so, check system environment variables in windows, my problem was that only one path was added but you need two paths. One under User varables for "YourUser" under path.
C:\Program Files \nodejs\
And second path under System variables also under path
C:\Program Files \nodejs\
This resolved problem for me, hope it helps!
I've been following along with a web dev tutorial and I'm stuck at this part: https://btholt.github.io/intro-to-web-dev-v2/libraries#building-your-code
I've been trying for a couple of days to install parcel-bundler and can't figure out what I'm doing wrong. I also tried Prettier and get the same errors. I'm so frustrated and running out of ideas.
I'm running npm 6.14.4 and node 12.16.2.
This is the error npm install -g parcel-bundler in Users/myName (Catalina 10.15):
npm WARN deprecated core-js#2.6.11: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js#3.
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
/Users/myName/.node_modules_global/bin/parcel -> /Users/myName/.node_modules_global/lib/node_modules/parcel-bundler/bin/cli.js
> parcel-bundler#1.12.4 postinstall /Users/myName/.node_modules_global/lib/node_modules/parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"
Love Parcel? You can now donate to our open collective:
> https://opencollective.com/parcel/donate
+ parcel-bundler#1.12.4
updated 1 package in 18.055s
And if I try to run parcel --help I'm told: -bash: parcel: command not found
So I try to fix that first warning. I list the links to the SO articles that I tried at the bottom. I tried deleting node_modules in home directory and doing npm install again. I tried npm install --save core-js#^3. I tried doing a forced clean cache and reinstalling. I tried npm update.
This is my package.json:
{
"name": "generic_package", <-- manually changed from myName
"version": "1.0.0",
"description": "Test description", <-- manually added to remove "no description" error
"main": ".mongorc.js",
"dependencies": {
"core-js": "^3.6.5", <-- looks like it's using >3v
"lodash": "^4.17.15",
"parcel-bundler": "^1.12.4", <-- looks like it's there??
"prettier": "^2.0.4"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node build/build.js" <-- manually added as per an SO article
},
"keywords": [],
"author": "",
"license": "ISC",
"repository": { <-- manually added this object as per an SO article
"type": "git",
"url": "https://github.com/npm/npm.git",
"private": true <-- manually added as per another SO article
}
}
Error: Please, upgrade your dependencies to the actual version of core-js#3
npm WARN deprecated core-js#2.6.11: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues
npm WARN deprecated core-js#2.6.11
How to update core-js to core-js#3 dependency?
Problems installing express using npm.
The reason for the message npm WARN deprecated core-js#2.6.11: core-js#<3 is no longer maintained is because parcel-bundler has a transitive dependency on core-js#2.6.11, which is no longer supported.
It appears that parcel was installed correctly, so you should be able to run it. On Linux systems, it would have created a symlink under /usr/local/bin/parcel. Make sure that "/usr/local/bin" is in your PATH.
You can also run it as follows:
npm run-script parcel
On newer versions of NPM, you can run this:
npx parcel
Error
Could not find the implementation for builder #angular-devkit/build-angular:dev-server
ng serve
Could not find the implementation for builder #angular-devkit/build-angular:dev-server
Error: Could not find the implementation for builder #angular-devkit/build-angular:dev-server
at WorkspaceNodeModulesArchitectHost.resolveBuilder (D:\angular-tour-of-heroes\node_modules\#angular\cli\node_modules\#angular-devkit\architect\node\node-modules-architect-host.js:49:19)
at ServeCommand.initialize (D:\angular-tour-of-heroes\node_modules\#angular\cli\models\architect-command.js:135:55)
at async ServeCommand.validateAndRun (D:\angular-tour-of-heroes\node_modules\#angular\cli\models\command.js:127:9)
at async Object.runCommand (D:\angular-tour-of-heroes\node_modules\#angular\cli\models\command-runner.js:178:24)
at async default_1 (D:\angular-tour-of-heroes\node_modules\#angular\cli\lib\cli\index.js:32:31)
ng version
Angular CLI: 8.0.3
Node: 12.4.0
OS: win32 x64
Angular: 7.2.2
... animations, cdk, common, compiler, core, forms, http
... platform-browser, platform-browser-dynamic, router
... service-worker
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.13.9
#angular-devkit/build-angular 0.13.9
#angular-devkit/build-optimizer 0.13.9
#angular-devkit/build-webpack 0.13.9
#angular-devkit/core 8.0.3
#angular-devkit/schematics 8.0.3
#angular/cli 8.0.3
#angular/compiler-cli 7.2.15
#angular/language-service 7.2.15
#angular/material 7.3.7
#angular/pwa 0.800.3
#ngtools/webpack 7.3.9
#schematics/angular 8.0.3
#schematics/update 0.13.9
rxjs 6.3.3
typescript 3.2.4
webpack 4.29.0
Package Json
{
"name": "angular-tour-of-heroes",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"#angular/animations": "7.2.2",
"#angular/cdk": "~7.2.2",
"#angular/common": "7.2.2",
"#angular/compiler": "7.2.2",
"#angular/core": "7.2.2",
"#angular/forms": "7.2.2",
"#angular/http": "7.2.2",
"#angular/material": "^7.2.2",
"#angular/platform-browser": "7.2.2",
"#angular/platform-browser-dynamic": "7.2.2",
"#angular/pwa": "^0.800.3",
"#angular/router": "7.2.2",
"#angular/service-worker": "7.2.2",
"angular-datatables": "^7.0.0",
"angular-in-memory-web-api": "0.8.0",
"angular2-datatable": "^0.6.0",
"bootstrap": "^4.3.1",
"core-js": "2.6.3",
"datatables.net": "^1.10.19",
"datatables.net-buttons": "^1.5.6",
"datatables.net-buttons-dt": "^1.5.6",
"datatables.net-dt": "^1.10.19",
"hammerjs": "^2.0.8",
"jasmine-core": "3.3.0",
"jasmine-marbles": "0.4.1",
"jquery": "^3.4.1",
"jszip": "^3.2.1",
"ng-select2": "^1.0.8",
"ng2-select2": "^1.0.0-beta.16",
"ngx-bootstrap": "^3.2.0",
"rxjs": "6.3.3",
"rxjs-compat": "^6.3.3",
"select2": "^4.0.6-rc.1",
"tslib": "^1.9.0",
"web-animations-js": "2.3.1",
"zone.js": "0.8.29"
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.9",
"#angular-devkit/core": "^8.0.3",
"#angular/cli": "^8.0.3",
"#angular/compiler-cli": "^7.2.7",
"#angular/language-service": "~7.2.2",
"#types/datatables.net": "^1.10.15",
"#types/datatables.net-buttons": "^1.4.1",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "^2.0.6",
"#types/jquery": "^3.3.29",
"#types/node": "~10.12.18",
"codelyzer": "~4.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.0.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "^2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~8.0.1",
"tslint": "~5.12.1",
"typescript": "~3.2.4"
}
}
Solution i have tried
remove node_module,package-lock.json
npm install --save-dev #angular-devkit/build-angular
npm install
npm update
npm install -g typescript#latest
i tried to update
PS D:\angular-tour-of-heroes> ng update
Using package manager: 'npm'
Collecting installed dependencies...
Found 58 dependencies.
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
#angular/cdk 7.2.2 -> 8.0.1 ng update #angular/cdk
#angular/core 7.2.15 -> 8.0.1 ng update #angular/core
#angular/core 7.2.2 -> 7.2.15 ng update #angular/core
#angular/material 7.3.7 -> 8.0.1 ng update #angular/material
rxjs 6.3.3 -> 6.5.2 ng update rxjs
There might be additional packages that are outdated.
Run "ng update --all" to try to update all at the same time.
PS D:\angular-tour-of-heroes> ng update #angular/cdk
Repository is not clean. Please commit or stash any changes before updating.
npm cache verify
I have tried to Update Node/Npm version
node -v
v12.4.0
npm -v
6.9.0
I have also followed link Could not find module "#angular-devkit/build-angular"
Angular Guide for upgrade
https://update.angular.io/#7.0:8.0
D:\angular-tour-of-heroes> ng update #angular/cli #angular/core
Repository is not clean. Please commit or stash any changes before updating.
After fixing git issue
PS D:\angular-tour-of-heroes> ng update --all
Using package manager: 'npm'
Collecting installed dependencies...
Found 58 dependencies.
Package "#angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2")
Package "#angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2")
Package "angular2-datatable" has an incompatible peer dependency to "#angular/common" (requires "^2.0.0" (extended), would install "8.0.1").
Package "#angular/http" has an incompatible peer dependency to "#angular/core" (requires "7.2.15", would install "8.0.1")
Package "angular2-datatable" has an incompatible peer dependency to "#angular/core" (requires "^2.0.0" (extended), would install "8.0.1").
Package "angular2-datatable" has an incompatible peer dependency to "#angular/platform-browser" (requires "^2.0.0" (extended), would install "8.0.1").
Package "#angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").
Package "angular2-datatable" has an incompatible peer dependency to "rxjs" (requires "^5.0.0-beta.12", would install "6.5.2").
Incompatible peer dependencies found. See above
After trying all solution still cannot run ng serve in cli.
any help is most welcome
Solution
After upgrading to Angular 8
problem may occur
ng update --all
Using package manager: 'npm'
Collecting installed dependencies...
Found 58 dependencies.
Package "#angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2")
Package "#angular-devkit/build-angular" has an incompatible peer dependency to "typescript" (requires ">=3.1 < 3.5", would install "3.5.2")
Package "angular2-datatable" has an incompatible peer dependency to "#angular/common" (requires "^2.0.0" (extended), would install "8.0.1").
Package "#angular/http" has an incompatible peer dependency to "#angular/core" (requires "7.2.15", would install "8.0.1")
Package "angular2-datatable" has an incompatible peer dependency to "#angular/core" (requires "^2.0.0" (extended), would install "8.0.1").
Package "angular2-datatable" has an incompatible peer dependency to "#angular/platform-browser" (requires "^2.0.0" (extended), would install "8.0.1").
Package "#angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.5", would install "3.5.2").
Package "angular2-datatable" has an incompatible peer dependency to "rxjs" (requires "^5.0.0-beta.12", would install "6.5.2").
Incompatible peer dependencies found. See above
Solution for these error
ng update --all --force
Then error
ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.5.0 but 3.5.2 was found instead.
npm install typescript#">=3.4.0 <3.5.0" --save-dev --save-exact
Just to be sure run the following steps:
npm uninstall -g #angular/cli
npm cache verify
npm install -g #angular/cli#latest
Then in your Local project package:
rm -rf node_modules dist
npm install --save-dev #angular/cli#latest
npm i
ng update #angular/cli
ng update #angular/core
will fix the issue
Here's what finally worked for me, from my project folder
nvm use 10.14.1
rm -rf node_modules dist
npm install --save-dev #angular/cli#latest
ng update --all --force --allow-dirty
npm install --save zone.js#0.9.1
You may have to resolve other dependencies, depending on the packages used by your application.
So far I have been unsuccessful in an attempt to use the env preset. I browsed the git issues that others have raised such as this, and implemented some of the suggestions that appeared to work for others, but no luck so far.
Here's what I'm working with:
package.json
"bundle": "browserify ./client/app.js -d -o ./public/o.js -t [ babelify --presets [ env ] ]",
"devDependencies": {
"#babel/cli": "^7.0.0-beta.40",
"#babel/preset-env": "^7.0.0-beta.40",
"babel-core": "^6.26.0",
"babelify": "^8.0.0"
...
And here is the error:
Error: Couldn't find preset "env" relative to directory "/Users/user/Documents/git/ts/client" while parsing file: /Users/user/Documents/git/ts/client/app.js
Anything I could be missing?
Many of the github issues relating to this suggest that babel-preset-env is not installed.
Indeed it doesn't seem to be there in your package.json. Add & install it by doing this:
npm install babel-preset-env --save
Though the earlier answers do provide the right solution and it works. But this should be installed as a dev dependency not as the core one. As this is needed only for development work. If you are using npm you can use:
npm install --save-dev babel-preset-env
or if you are using yarn as package manager then use:
yarn add --dev babel-preset-env
You just need to install babel-preset-env and your code will compile properly.
npm install babel-preset-env
Basically, this type of error occurs due to mismatch in versions of babel-core, babel-preset-env and babel-loader. Below are matched and tested devDependencies, which worked for me.
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.5.0",
"install": "^0.13.0",
"npm": "^6.14.8",
"regenerator-runtime": "^0.13.7",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
You can check whether .babelrc file exists in the directory above or above the directory. Just delete the file is OK
When I run npm run dev on a Laravel Spark v4.0.9 app, I get the following error:
Module build failed: Error:
Vue packages version mismatch:
- vue#2.0.8
- vue-template-compiler#2.2.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.
My package.json looks like this:
{
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"axios": "^0.15.2",
"bootstrap": "^3.0.0",
"cross-env": "^3.2.3",
"jquery": "^2.1.4",
"js-cookie": "^2.1.0",
"laravel-mix": "0.*",
"moment": "^2.10.6",
"promise": "^7.1.1",
"sweetalert": "^1.1.3",
"underscore": "^1.8.3",
"urijs": "^1.17.0",
"vue": "~2.0.1",
"vue-resource": "^1.2.0",
"vue-router": "^2.2.1",
"vue-truncate-filter": "^1.1.6",
"vuejs-datepicker": "^0.6.2"
},
"devDependencies": {
"browser-sync": "^2.18.8",
"browser-sync-webpack-plugin": "^1.1.4"
}
}
I have tried the following (at different times, not in order):
deleted node_modules and npm install
tried just running yarn and yarn upgrade
removing vue-loader and reinstalling
specifying exact versions of vue and vue-template-compiler rather than leaving it up to npm to install or yarn to figure out dependencies
removing other non-essential packages (vue-router, vue-truncate-filter, vuejs-datepicker) and trying all of the above again
banging my head against a wall
This worked for me:
Modify package.json:
“vue”: “^2.0.8",
“vue-template-compiler”: “^2.1.8"
Delete node_modules
Run npm install
For vue ^2.5.17.
In your package.json
Simply Add this in devDependencies or update the version of vue-template-compiler:
"vue-template-compiler": "^2.5.17"
You wil have this output:
"devDependencies": {
...
"lodash": "^4.17.4",
"popper.js": "^1.14.4",
"vue": "^2.5.17", // <= note the version
"vue-template-compiler": "^2.5.17" // <= note the version
},
After that, run:
npm install
Npm will update only the updated packages.
Don't need to remove all node_modules folder. Just update packages: vue, vue-template-compiler and vue-server-renderer by #latest flag and it should help for any cases with dismatched versions of vue packages.
npm i vue-template-compiler#latest --save
npm i vue-server-renderer#latest --save
--save will automatically update version in your package.json file. #latest means install latest available version of package. If you need to update vue do it by the same way like we do it in above example.
Also, you always can check new versions for updates by command: npm outdated. It shows you all list of packages, that should be updated.
By the way, npm update command update only minor and patches versions, but it unusles when you want to update major version. For example npm update will not update 2.4.5 => 3.0.1, but can update
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
This steps helped me:
rm package-lock.json, rm -rf node_modules, npm update, npm install
Check dependency for vue and replace with exact in dev dependency for vue-template-compiler.
For eg.
"dependencies": {
"vue": "^2.5.2",
},
"devDependencies": {
"vue-template-compiler": "^2.5.3",
},
Should be replaced with:
"dependencies": {
"vue": "2.5.2",
},
"devDependencies": {
"vue-template-compiler": "2.5.2",
},
And run the npm install again.
Updating Vue was the solution for me.
npm i vue#latest --save
Want to mention that previously I do the steps described in Kamil' Ocean answer:
npm i vue-template-compiler#latest --save
npm i vue-server-renderer#latest --save
Once updated Vue it worked.
I run the following command:
yarn global upgrade
That will upgrade any relation that need some upgrading
Here, vue template compiler compiles the vue template. If you use vue one version and vue-template-compiler another version, that's a problem.
Run this command
npm update vue-template-compiler
This will fix the issue and it will install a vue template compiler same version like vue js version.
This worked for me and your 100%:
Modify package.json: "vue": "^2.6.12" to "vue": "2.6.12"
Delete the folder node_modules
Delete package-lock.json
Run npm install
I just had to make these two versions match ( by changing the compiler value match the "vue" value in the package.json and run npm install:
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11"
npm install
No deleting or anything else in this case.
From the accepted answer, instead of deleting node_modules folder and run again yarn install, you can simply upgrade those 2 packages directly:
yarn upgrade vue#^2.0.8
yarn upgrade vue-template-compiler#^2.1.8
Try this : npm install vue-template-compiler#2.0.8 --save-dev
Converting the vue-template-compiler version to same as vue version (for this case 2.0.8) worked for me. Give it a try.
This worked for me:
Modify package.json:
"vue": "^2.5.2" to "vue": "2.5.*"
Delete the folder node_modules
Delete package-lock.json
Run npm install
I used npm install vue --save and that worked for me
As seen in the error message:
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.
I was using a higher vue-loader so I ran the command
npm update vue-template-compiler
and that worked like charm
NPM have special command to handle such a situation
try this:
npm install --legacy-peer-deps
Each one of us will have won the solution. So you need to see your vue version from your Error Message. For me, my Error was :
vue#2.6.14
vue-template-compiler#2.7.14
Ok from the Error Message, I find that the vue version is 2.6.14, So we need to update vue-template-compiler to that version, using:
npm install vue-template-compiler#2.6.14 --save-dev
You can do it like this:
reinstalling the vue version and the compiler with the same version by example
npm i vue#2.6.14
npm i vue-template-compiler#2.6.14
or you can do :
change it in the package.json
"dependencies": {
"vue": "^2.6.14",
},
"devDependencies": {
"vue-template-compiler": "^2.6.14",
},
or you can do : npm update vue-template-compiler if you are using the latest version of vue,
delete the module file and do npm install
You don't need to delete node_modules folder.
- vue#2.0.8
- vue-template-compiler#2.2.6
Update the package with a lower version number. In this case, npm update vue.
Optionally, you may want to npm update vue-loader too
Doing a clean install helped using the following command:
npm ci
More detailed documentation about this command can be found here.
this command save me.
npm install vue-template-compiler#2.5.16 --save-dev
maybe you can just run this to change the vue-loader
npm install vue-loader#latest --force
it works with me
Need to use the same vue-template-compiler as the version of vue been installed.
So I
npm uninstall vue-template-compiler --save-dev
and reinstall with
npm install vue-template-compiler#2.6.14 --save-dev
as the version of vue installed in my package-lock.json is 2.6.14.
Vue packages version mismatch:
vue#2.0.8
vue-template-compiler#2.2.6
Since the version of the Vue-template-compiler is new than that of the Vue
try to match the version
// Following vue#2.0.8 version
npm i vue-template-compiler#2.0.8
or
// Following vue-template-compiler#2.2.6 version
npm i vue#2.2.6
[SOLVED!!]
I went to the very same package.json file of the vue-template-compiler that is complaining, changed the version of the package in there and run yarn, like so:
_~/.config/yarn/global/node_modules/vue-jscodeshift-adapter/node_modules/vue-template-compiler/package.json_:
OLD:
"name": "vue-template-compiler",
"version": "2.6.11"
NEW:
"name": "vue-template-compiler",
"version": "2.6.10"
Run:
yarn
Source: https://github.com/vuejs/vue/issues/10932
Note: path to package.json and versions are specific for my case.