Cannot upgrade Vue 3 project dependencies with npm v7 due to peer-dependency failure

Version

vue-cli: 4.5.13 vue: 3.1.4

Reproduction link

https://codesandbox.io/s/flamboyant-cartwright-074c9?file=/package.json

Steps to reproduce

Note: I wasn’t sure if this issue should be opened in the vue-next repo, or vue-cli.

I have a Vue 3 & TypeScript project that was created with Vue CLI. I’m using npm version 7.5.3 on my local machine, as npm is the suggested method (rather than yarn) according to the Vue 3 docs.

Click to view the contents of my package.json file

{
  "name": "project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "prepare": "husky install",
    "prettier:check": "prettier --check .",
    "prettier:fix": "prettier --write ."
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^3.0.0-3",
    "@types/lodash.groupby": "^4.6.6",
    "@vueuse/core": "^4.11.0",
    "@vueuse/integrations": "^4.11.1",
    "axios": "^0.21.1",
    "bulma": "^0.9.3",
    "chart.js": "^2.9.4",
    "core-js": "^3.6.5",
    "dayjs": "^1.10.4",
    "jwt-decode": "^3.1.2",
    "lodash.groupby": "^4.6.0",
    "primeicons": "^4.1.0",
    "primevue": "^3.5.0",
    "vue": "^3.0.0",
    "vue-clipboard3": "^1.0.1",
    "vue-router": "^4.0.0-0",
    "vue-toastification": "^2.0.0-rc.1",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "husky": "^6.0.0",
    "prettier": "^2.2.1",
    "pretty-quick": "^3.1.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "style-resources-loader": "^1.4.1",
    "typescript": "~4.1.5"
  }
}

If you view the package.json file above, or in the reproduction repository, you can see that Vue CLI set the Vue dependency to vue: ^3.0.0 when I created the project. Now that 3.1.4 has been released, I’d like to upgrade my project dependencies to use the newer version of Vue 3 and its associated plugins/packages (e.g. @vue/compiler-sfc@3.1.4, upgrade vue-router and vuex, etc.).

Using npm 7.5.3 I tried running npm install vue@3.1.4 to upgrade Vue; however, the upgrade failed due to the way npm version 7 handles peer dependencies. (I also tried npm upgrade, upgrading all necessary packages at once, and even tried vue upgrade but the same failure occurs)

Here is the error output I received:

# Current package.json has "vue": "^3.0.0"

❯ npm install vue@3.1.4
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: vue@3.1.4
npm ERR! node_modules/vue
npm ERR!   vue@"3.1.4" from the root project
npm ERR!   peer vue@"3.x" from @fortawesome/vue-fontawesome@3.0.0-3
npm ERR!   node_modules/@fortawesome/vue-fontawesome
npm ERR!     @fortawesome/vue-fontawesome@"^3.0.0-3" from the root project
npm ERR!   7 more (@vue/babel-preset-app, vue-demi, vue-demi, vue-demi, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"3.0.11" from @vue/compiler-sfc@3.0.11
npm ERR! node_modules/@vue/compiler-sfc
npm ERR!   peerOptional @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-plugin-typescript@4.5.13
npm ERR!   node_modules/@vue/cli-plugin-typescript
npm ERR!     dev @vue/cli-plugin-typescript@"~4.5.0" from the root project
npm ERR!   peerOptional @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.13
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.13
npm ERR!     node_modules/@vue/cli-plugin-babel
npm ERR!       dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!     5 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
npm ERR!   1 more (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.

I have also tried removing packages from the project just to test the upgrade process but still cannot get Vue and related plugins/packages to successfully update. For example, if I remove all of the fontawesome packages listed in the above error and then try updating only vue and @vue/compiler-sfc I still receive a failure with the following error:

❯ npm install vue@3.1.4 @vue/compiler-sfc@3.1.4
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @vue/compiler-sfc@3.0.11
npm ERR! node_modules/@vue/compiler-sfc
npm ERR!   peerOptional @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-plugin-typescript@4.5.13
npm ERR!   node_modules/@vue/cli-plugin-typescript
npm ERR!     dev @vue/cli-plugin-typescript@"~4.5.0" from the root project
npm ERR!   peerOptional @vue/compiler-sfc@"^3.0.0-beta.14" from @vue/cli-service@4.5.13
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.13
npm ERR!     node_modules/@vue/cli-plugin-babel
npm ERR!       dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!     peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-eslint@4.5.13
npm ERR!     node_modules/@vue/cli-plugin-eslint
npm ERR!       dev @vue/cli-plugin-eslint@"~4.5.0" from the root project
npm ERR!     4 more (@vue/cli-plugin-router, @vue/cli-plugin-typescript, ...)
npm ERR!   1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @vue/compiler-sfc@"3.1.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue@3.1.4
npm ERR! node_modules/vue
npm ERR!   peer vue@"3.1.4" from @vue/compiler-sfc@3.1.4
npm ERR!   node_modules/@vue/compiler-sfc
npm ERR!     dev @vue/compiler-sfc@"3.1.4" 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.

I realize I could possibly pass the --legacy-peer-deps flag to npm; however, I’m afraid of incompatible dependencies down the line and feel this isn’t a valid solution, but rather a temporary workaround (also, I’m not sure this would work as I haven’t tested updating with this flag).

I created the linked CodeSandbox repository as required; however, it uses yarn instead of npm and there isn’t a way to trigger the npm update commands.

The easier way to reproduce would be to download the project from CodeSandbox and then try updating the packages in the project on your local machine, making sure to use npm version 7 .

What is expected?

Vue and it’s related packages/plugins should be able to be upgraded in the project without a temporary workaround.

What is actually happening?

Upgrading project dependencies fails, I believe, due to the way npm version >= 7 handles peer dependencies.

---

I can’t imagine I’m the only one running into issues upgrading, especially when using npm >= 7 and would really appreciate some help figuring this out as I created the project to spec using vue-cli.

I’m happy to provide additional info as needed.

[sodatea]

Maybe it’s something that we need to document. I’m not sure yet. The peer-dependency-auto-installation thing in npm really brings a lot of trouble.

[IsaiahTek]

I just encountered a similar error. I fixed it by updating the @vue/compiler-sfc in the package.json file to 3.1.4