npm update fails for Vue 2 project, created with vue-cli - vue.js

Question

I've created a Vue 2 project with vue-cli and tried to run npm update.
Unfortunately, I receive the following error:
{
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test-vue#0.1.0
npm ERR! Found: vue#2.6.12
npm ERR! node_modules/vue
npm ERR! vue#"~2.6.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"3.0.7" from #vue/compiler-sfc#3.0.7
npm ERR! node_modules/#vue/compiler-sfc
npm ERR! peerOptional #vue/compiler-sfc#"^3.0.0-beta.14" from #vue/cli-service#4.5.11
npm ERR! node_modules/#vue/cli-service
npm ERR! dev #vue/cli-service#"~4.5.0" from the root project
npm ERR! 1 more (#vue/cli-plugin-babel)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
My package.json looks like this:
{
"name": "test-vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#turf/turf": "^6.3.0",
"bootstrap": "^4.5.3",
"core-js": "^3.6.5",
"leaflet": "^1.7.1",
"leaflet-geodesy": "^0.2.1",
"vue": "~2.6.11",
"vue-router": "~3.2.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^6.2.2",
"prettier": "^1.19.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "~2.6.11"
}
}
I thought the ~ in the package.json should prevent from upgrading to Vue 3?
You help is appreciated!
EDIT: Tried as suggest with ncu -u
PS E:\projects\test-vue> ncu -u
Upgrading E:\projects\test-vue\package.json
[====================] 20/20 100%
core-js ^3.6.5 → ^3.9.1
vue ~2.6.11 → ~2.6.12
vue-router ~3.2.0 → ~3.5.1
#vue/cli-plugin-babel ~4.5.0 → ~4.5.11
#vue/cli-plugin-eslint ~4.5.0 → ~4.5.11
#vue/cli-plugin-router ~4.5.0 → ~4.5.11
#vue/cli-service ~4.5.0 → ~4.5.11
eslint ^6.7.2 → ^7.21.0
eslint-plugin-prettier ^3.1.3 → ^3.3.1
eslint-plugin-vue ^6.2.2 → ^7.7.0
prettier ^1.19.1 → ^2.2.1
sass ^1.26.5 → ^1.32.8
sass-loader ^8.0.2 → ^11.0.1
vue-template-compiler ~2.6.11 → ~2.6.12
Run npm install to install new versions.
PS E:\projects\test-vue> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: webpack#5.24.3
npm ERR! node_modules/webpack
npm ERR! peer webpack#"^4.0.0 || ^5.0.0" from #soda/friendly-errors-webpack-plugin#1.8.0
npm ERR! node_modules/#soda/friendly-errors-webpack-plugin
npm ERR! #soda/friendly-errors-webpack-plugin#"^1.7.1" from #vue/cli-service#4.5.11
npm ERR! node_modules/#vue/cli-service
npm ERR! dev #vue/cli-service#"~4.5.11" from the root project
npm ERR! 4 more (#vue/cli-plugin-babel, #vue/cli-plugin-eslint, ...)
npm ERR! peer webpack#">=4.0.0" from #vue/preload-webpack-plugin#1.1.2
npm ERR! node_modules/#vue/preload-webpack-plugin
npm ERR! #vue/preload-webpack-plugin#"^1.1.0" from #vue/cli-service#4.5.11
npm ERR! node_modules/#vue/cli-service
npm ERR! dev #vue/cli-service#"~4.5.11" from the root project
npm ERR! 4 more (#vue/cli-plugin-babel, #vue/cli-plugin-eslint, ...)
npm ERR! 8 more (babel-loader, copy-webpack-plugin, css-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"^4.0.0" from #intervolga/optimize-cssnano-plugin#1.0.6
npm ERR! node_modules/#intervolga/optimize-cssnano-plugin
npm ERR! #intervolga/optimize-cssnano-plugin#"^1.0.5" from #vue/cli-service#4.5.11
npm ERR! node_modules/#vue/cli-service
npm ERR! dev #vue/cli-service#"~4.5.11" from the root project
npm ERR! 4 more (#vue/cli-plugin-babel, #vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Admin\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Admin\AppData\Local\npm-cache\_logs\2021-03-06T19_52_21_583Z-debug.log

Answer 1

maybe you can try to npm i -g npm-check-updates then in the root folder try to execute ncu -u this will update your dependencies, devDependencies and peerDependencies

Answer 2

There was an issue with some dependencies.
I finally worked this out by creating a new project with vue-cli and copying that package.json there.
Edit:
You have to make sure that you use compatible versions of all dependencies. - The best way to do this is to generate a project with vue-cli to get compatible versions.
Long story short: don't mess with the dependencies