bug: vue cli v5 peer dependency conflicts

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

I followed the steps at https://github.com/ionic-team/ionic-framework/blob/next/BETA.md to start a Framework v6 project, but I get an error when running vue-upgrade --next.

Upgrading @vue/cli-service from 4.5.15 to 5.0.0-rc.1
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @vue/cli-plugin-babel@4.5.15
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

Expected Behavior

I expected to get through the steps

Steps to Reproduce

ionic start --type=vue (I’m running version 6.18.1 of the @ionic/cli)

Name the project vue-test and select a blank project

cd vue-test

Now follow the direction at https://github.com/ionic-team/ionic-framework/blob/next/BETA.md starting with npm install vue@next vue-router@4

When you get to the vue upgrade --next step it will crap out.

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 could not resolve
npm ERR! 
npm ERR! While resolving: @vue/cli-plugin-babel@4.5.15
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-babel@4.5.15
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR!   dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @vue/cli-service@4.5.15
npm ERR! node_modules/@vue/cli-service
npm ERR!   peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.15
npm ERR!   node_modules/@vue/cli-plugin-babel
npm ERR!     dev @vue/cli-plugin-babel@"~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-05T18_39_27_466Z-debug.log
 ERROR  command failed: npm install --loglevel error @vue/cli-service@^5.0.0-rc.1 --registry=https://registry.npmjs.org/

I’m running npm 7.22.0 and node 14.17.6.

Code Reproduction URL

No response

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module ‘@capacitor/ios/package’

   Require stack:
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module ‘@capacitor/android/package’

   Require stack:
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 6.18.1 (/Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 5.9.1

Capacitor:

Capacitor CLI : 3.3.2 @capacitor/android : not installed @capacitor/core : 3.3.2 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.5.0

System:

NodeJS : v14.17.6 (/Users/daviesd/.nvm/versions/node/v14.17.6b/bin/node) npm : 7.22.0 OS : macOS Big Sur

Additional Information

No response

[daviesdoclc]

@liamdebeasi Thanks. I opened up an issue there https://github.com/vuejs/vue-cli/issues/6864

[liamdebeasi]

We have new Ionic 6 starters coming in a few days.

It might be worthwhile filing an issue on https://github.com/vuejs/vue-cli. There may be other non-Ionic developers running into the same issue. I can leave this issue open for now and see if I can find anything that may help. Ultimately, this seems to be a peer dependency conflict with Vue CLI v5, not Ionic.