ng serve is not working after Angular 8 update - npm

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.

Related

How to fix #vue/cli Vulnerabilities?

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!

How to set a project's package.json to be able to install from local registry with verdaccio

I am learning microservices with docker and kubernetes by simple project, now I am trying to use local registry installed as a docker container with helm. I published my package/library in my local registry (I am using verdaccio) and successfully installed it on my current project with command "npm install #mycompany/mylibs --registry=http://localhost:4873". My problem is when I am trying to deploy my project to kubernetes via skaffold, it fails to download the packages from package.json config file. I tried both setting up .npmrc file to project's root folder and default registry on verdaccio conf file but all fail. Is there anyone has encountered same problem as mine and how to fix it. Somebody help please. Thank you
This is my project structure :
MyProject
|-auth (this service has dependency to #mycompany/mylibs)
| |-src
| |-Dockerfile
| |-package.json
|
|-infra/kube
| |-auth-depl.yaml
| |-ingress-srv.yaml
MySharedLibrary
| |-src
| |-package.json
auth's package.json :
{
"name": "auth",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "ts-node-dev src/index.ts",
"test": "jest --watchAll --no-cache"
},
"jest": {
"preset": "ts-jest",
"testEnvironment": "node",
"setupFilesAfterEnv": [
"./src/test/setup.ts"
]
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#mycompany/mylibs": "^1.0.3",
"#types/cookie-session": "^2.0.42",
"#types/express": "^4.17.9",
"#types/jsonwebtoken": "^8.5.0",
"cookie-session": "^1.4.0",
"express": "^4.17.1",
"express-async-errors": "^3.1.1",
"express-validator": "^6.7.0",
"jsonwebtoken": "^8.5.1",
"mariadb": "^2.5.1",
"mysql2": "^2.2.5",
"sequelize": "^6.3.5",
"ts-node-dev": "^1.0.0",
"typescript": "^4.1.2"
},
"devDependencies": {
"#types/jest": "^26.0.19",
"#types/supertest": "^2.0.10",
"jest": "^26.6.3",
"supertest": "^6.0.1",
"ts-jest": "^26.4.4"
}
}
I am using:
Windows 10 PC as main host for docker and where the project hosted.
docker version 19.03.13
npm version 6.14.6
verdaccio 4.12.0
helm 3.5.3
skaffold 1.13.0
The error message after I deploy my project with skaffold dev :
npm ERR! 404 Not Found - GET https://registry.npmjs.org/#mycompany%2fmylibs - Not found
npm ERR! 404
npm ERR! 404 '#mycompany/mylibs#^1.0.3' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'app'
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
I want my deployment process each container could find all required dependencies on local registry (http://localhost:4873) and when it couldn't find them, it should try to reach public npm (https://registry.npmjs.org or npmjs.com).
Thanks everyone for helping me, I solved this problem by reconfiguring my Dockerfile on auth service by adding line:
RUN npm config set registry http://<the_local_registry_container_IP>:4873
I am successful building the container but it raised new issues "request has been deprecated, see github.com/request/request/issues/3142" cause of I am using supertest. I don't know why I am still searching for the main problem. In another occasion if I build it with public npm repo, it doesn't raise that problem.
You need to associate the scope with your registry:
npm login --registry=http://localhost:4873 --scope=#mycompany
You can find the documenation here
After this npm install install package from you repository if the package is in the scope #mycompany

NPM still gives warnings, npm audix fix not working

My project's package.json dependencies:
"dependencies": {
"#babel/cli": "^7.0.0-beta.51",
"#babel/core": "^7.0.0-beta.51",
"#babel/preset-env": "^7.0.0-beta.51",
"babel-loader": "^8.0.0-beta.4",
"babel-plugin-add-module-exports": "^1.0.0",
"babel-plugin-istanbul": "^5.1.0",
"babel-preset-env": "^7.0.0-beta.3",
"babel-register": "^7.0.0-beta.3",
"build": "^0.1.4",
"jsdom": "^14.0.0",
"jsdom-global": "3.0.2",
"moment": "^2.24.0",
"nyc": "^13.1.0",
"rimraf": "^2.6.3",
"webpack": "^4.12.2",
"webpack-cli": "^3.0.8",
"yargs": "^13.2.2"
},
When I run "npm i", I still see:
audited 14173 packages in 5.084s
found 6 vulnerabilities (4 low, 1 moderate, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details
When I run "npm audit":
=== npm audit security report ===
Manual Review
Some vulnerabilities require your attention to resolve
Visit https://go.npm.me/audit-guide for additional guidance
Moderate Denial of Service
Package js-yaml
Patched in >=3.13.0
Dependency of build
Path build > jxLoader > js-yaml
More info https://npmjs.com/advisories/788
Critical Deserialization Code Execution
Package js-yaml
Patched in >= 2.0.5
Dependency of build
Path build > jxLoader > js-yaml
More info https://npmjs.com/advisories/16
Low Incorrect Handling of Non-Boolean Comparisons During
Minification
Package uglify-js
Patched in >= 2.4.24
Dependency of build
Path build > uglify-js
More info https://npmjs.com/advisories/39
Low Regular Expression Denial of Service
Package uglify-js
Patched in >=2.6.0
Dependency of build
Path build > uglify-js
More info https://npmjs.com/advisories/48
Low Regular Expression Denial of Service
Package braces
Patched in >=2.3.1
Dependency of babel-register
Path babel-register > babel-core > micromatch > braces
More info https://npmjs.com/advisories/786
Low Regular Expression Denial of Service
Package timespan
Patched in No patch available
Dependency of build
Path build > timespan
More info https://npmjs.com/advisories/533
When I try to run "npm audit fix" it say:
up to date in 4.704s
fixed 0 of 6 vulnerabilities in 14173 scanned packages
6 vulnerabilities required manual review and could not be updated
I already tried to delete the "package-lock.json" file and try again, already tried to clear npm cache, and tried to update the packages manually, none of these steps seems to be working. Does anybody know how to solve this?
Thanks.
I finally fixed it myself, updated all packages to the latest version manually, and removed the "build": "^0.1.4" package, since it no longer updates.

How do I fix a "Vue packages version mismatch" error on Laravel Spark v4.0.9?

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.

npm states modules are missing that aren't

Below is my package.json file.
{
"name": "test",
"version": "1.0.0",
"description": "web_app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Brad",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.9.0",
"browser-sync": "^2.13.0",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
"gulp-changed": "^1.3.0",
"gulp-cssnano": "^2.1.2",
"gulp-file-include": "^0.13.7",
"gulp-htmlmin": "^2.0.0",
"gulp-if": "^2.0.1",
"gulp-sass": "^2.3.2",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.3",
"gulp-uncss": "^1.0.5",
"gulp-useref": "^3.1.0",
"htmlmin": "0.0.6",
"run-sequence": "^1.2.1"
},
"dependencies": {
"rxjs-es": "^5.0.0-beta.9"
}
}
When in run 'npm install' I get the following errors:
npm WARN deprecated minimatch#2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs#3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs#^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated minimatch#0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated lodash#1.0.2: lodash#<3.0.0 is no longer maintained. Upgrade to lodash#^4.0.0.
npm WARN deprecated graceful-fs#1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs#^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated minimatch#0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch#1.0.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN prefer global node-gyp#3.3.1 should be installed with -g
As I don't have modules like 'minimatch' in my package.json file I'm assuming that other modules depend on it. So I installed all the outdated modules globally. This didn't remove the error messages. If I try and run say a gulp task it will work, however, if I restart my computer and then try and run the same gulp task, it will say modules are missing, even though they are in the node_modules folder. Any ideas?
Yes, your dependencies are using deprecated packages.
Try running npm ls to find which dependencies are referencing old packages.
Update minimatch to latest version 3.0.2 by running following command
npm update -g minimatch#3.0.2