vue upgrade is failing

[daviesdoclc]

Version

5.0.0-rc.1

Environment info

  System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Edge: 96.0.1054.43
    Firefox: 92.0
    Safari: 15.1
  npmPackages:
    @ionic/vue: ^5.4.0 => 5.9.2 
    @ionic/vue-router: ^5.4.0 => 5.9.2 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.1.1 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.15 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.15 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-e2e-cypress: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-router: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-unit-jest: ~4.5.0 => 4.5.15 
    @vue/cli-plugin-vuex:  4.5.15 
    @vue/cli-service: ~4.5.0 => 4.5.15 
    @vue/cli-shared-utils:  4.5.15 
    @vue/compiler-core:  3.2.24 
    @vue/compiler-dom:  3.2.24 
    @vue/compiler-sfc: ^3.0.0-0 => 3.2.24 
    @vue/compiler-ssr:  3.2.24 
    @vue/component-compiler-utils:  3.3.0 
    @vue/devtools-api:  6.0.0-beta.20.1 
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.2.24 
    @vue/ref-transform:  3.2.24 
    @vue/runtime-core:  3.2.24 
    @vue/runtime-dom:  3.2.24 
    @vue/server-renderer:  3.2.24 
    @vue/shared:  3.2.24 
    @vue/test-utils: ^2.0.0-0 => 2.0.0-rc.17 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^7.0.0-0 => 7.20.0 
    jest-serializer-vue:  2.0.2 
    typescript: ^4.3.5 => 4.5.2 
    vue: ^3.2.1 => 3.2.24 (2.6.14)
    vue-eslint-parser:  7.11.0 
    vue-hot-reload-api:  2.3.4 
    vue-jest: ^5.0.0-0 => 5.0.0-alpha.10 (3.0.7)
    vue-loader:  15.9.8 (16.8.3)
    vue-router: ^4.0.0-0 => 4.0.12 
    vue-style-loader:  4.1.3 
    vue-template-compiler:  2.6.14 
    vue-template-es2015-compiler:  1.9.1

Steps to reproduce

I'm trying to upgrade an ionic project.

npm install -g @ionic/cli
npm install -g @vue/cli@next
ionic start --type=vue (pick blank project. call it vue-test)
cd vue-test
vue upgrade --next

What is expected?

I expected the vue dependencies to be upgraded.

What is actually happening?

I get the following error:

% vue upgrade --next    
✔  Gathering package information...
  Name                         Installed       Wanted          Latest          Command to upgrade
  @vue/cli-service             4.5.15          4.5.15          5.0.0-rc.1      vue upgrade @vue/cli-service --next
  @vue/cli-plugin-babel        4.5.15          4.5.15          5.0.0-rc.1      vue upgrade @vue/cli-plugin-babel --next
  @vue/cli-plugin-e2e-cypress  4.5.15          4.5.15          5.0.0-rc.1      vue upgrade @vue/cli-plugin-e2e-cypress --next
  @vue/cli-plugin-eslint       4.5.15          4.5.15          5.0.0-rc.1      vue upgrade @vue/cli-plugin-eslint --next
  @vue/cli-plugin-router       4.5.15          4.5.15          5.0.0-rc.1      vue upgrade @vue/cli-plugin-router --next
  @vue/cli-plugin-typescript   4.5.15          4.5.15          5.0.0-rc.1      vue upgrade @vue/cli-plugin-typescript --next
  @vue/cli-plugin-unit-jest    4.5.15          4.5.15          5.0.0-rc.1      vue upgrade @vue/cli-plugin-unit-jest --next
? Continue to upgrade these plugins? Yes
Upgrading @vue/cli-service from 4.5.15 to 5.0.0-rc.1
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: vue-test@0.0.1
npm ERR! Found: @vue/cli-service@5.0.0-rc.1
npm ERR! node_modules/@vue/cli-service
npm ERR!   dev @vue/cli-service@"~5.0.0-rc.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-router@4.5.15
npm ERR! node_modules/@vue/cli-plugin-router
npm ERR!   dev @vue/cli-plugin-router@"~4.5.0" from the root project
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 /Users/daviesd/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/daviesd/.npm/_logs/2021-12-09T18_24_01_854Z-debug.log
 ERROR  Error: command failed: npm install --loglevel error @vue/cli-service@~5.0.0-rc.1
Error: command failed: npm install --loglevel error @vue/cli-service@~5.0.0-rc.1
    at ChildProcess.<anonymous> (/Users/daviesd/.nvm/versions/node/v16.13.1/lib/node_modules/@vue/cli/lib/util/executeCommand.js:138:16)
    at ChildProcess.emit (node:events:390:28)
    at maybeClose (node:internal/child_process:1064:16)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)

---

I have a bug open on the ionic issues list ionic-team/ionic-framework#24319. However, they suggested this is a vue bug and not an ionic one.

[theperiscope]

I got the same same/similar error trying to upgrade from 4.5.13 to 5.0.1

  Name                    Installed       Wanted          Latest          Command to upgrade
  @vue/cli-plugin-eslint  4.5.13          4.5.15          5.0.1           vue upgrade @vue/cli-plugin-eslint
  @vue/cli-plugin-router  4.5.13          4.5.15          5.0.1           vue upgrade @vue/cli-plugin-router
  @vue/cli-plugin-vuex    4.5.13          4.5.15          5.0.1           vue upgrade @vue/cli-plugin-vuex
? Continue to upgrade these plugins? Yes
Upgrading @vue/cli-plugin-eslint from 4.5.13 to 5.0.1
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree

With googling and lots of trial and error the following worked for me (vue upgrade was not used at all):

npm install @vue/cli-plugin-vuex@5 --legacy-peer-deps
npm install @vue/cli-plugin-router@5 --legacy-peer-deps
npm install @vue/cli-plugin-eslint@5 --legacy-peer-deps

[mcfarljw]

I was seeing this as well and confused why vue create was working for new projects which the exact same dependencies. It looks like under the hood it's using legacy-peer-deps when installing (see commit d5ad647).

So if you're like me and regenerating your package-lock.json you'll need to use that flag the first time you install things.

[laurent-brisbois]

I got the same same/similar error trying to upgrade from 4.5.13 to 5.0.1

  Name                    Installed       Wanted          Latest          Command to upgrade
  @vue/cli-plugin-eslint  4.5.13          4.5.15          5.0.1           vue upgrade @vue/cli-plugin-eslint
  @vue/cli-plugin-router  4.5.13          4.5.15          5.0.1           vue upgrade @vue/cli-plugin-router
  @vue/cli-plugin-vuex    4.5.13          4.5.15          5.0.1           vue upgrade @vue/cli-plugin-vuex
? Continue to upgrade these plugins? Yes
Upgrading @vue/cli-plugin-eslint from 4.5.13 to 5.0.1
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree

With googling and lots of trial and error the following worked for me (vue upgrade was not used at all):

npm install @vue/cli-plugin-vuex@5 --legacy-peer-deps
npm install @vue/cli-plugin-router@5 --legacy-peer-deps
npm install @vue/cli-plugin-eslint@5 --legacy-peer-deps

Isn't it dangerous to use --legacy-peer-deps ?