[v3] Peer dependency conflict using Vue 3 and NPM 7

[kiontupper]

Reproduction

Step 1: Create a new folder with the following package.json:

{
  "dependencies": {
    "vue": "^3.0.0",
    "vuefire": "^3.0.0-alpha.2"
  }
}

Step 2: Make sure NPM 7 is installed (in my case, 7.10.0)
Step 2: npm i

Expected behavior

Expected this to install successfully.

Actual behavior

NPM 7 now treats peer dependencies similar to normal dependencies. Specifically, the @vue/composition-api peer dependency is incompatible with Vue 3. NPM tries to resolve @vue/composition-api, resulting in a conflict.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vue@3.0.11
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0" from the root project
npm ERR!   peer vue@"^2.0.0 || >=3.0.0-rc.0" from vuefire@3.0.0-alpha.2
npm ERR!   node_modules/vuefire
npm ERR!     vuefire@"^3.0.0-alpha.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@">= 2.5 < 3" from @vue/composition-api@1.0.0-rc.7
npm ERR! node_modules/@vue/composition-api
npm ERR!   peer @vue/composition-api@"^1.0.0-beta.1" from vuefire@3.0.0-alpha.2
npm ERR!   node_modules/vuefire
npm ERR!     vuefire@"^3.0.0-alpha.2" from the root project

Additional information

As far as I can tell, there are two ways to fix this.

Option 1 (IMO the best option)

Move @vue/composition-api in package.json from peerDependencies to optionalDependencies. In this case, NPM will try to install @vue/composition-api if possible (as would be the case for a Vue 2 user), but if it can't, it will proceed without, so Vue 3 users will also be able to proceed.

"dependencies": { // or peerDependencies, doesn't really matter
  "vue": "^2.0.0 || >=3.0.0-rc.0"
},
"optionalDependencies": {
  "@vue/composition-api": "^1.0.0-beta.1"
}

Option 2

The peerDependenciesMeta field can be added to package.json. This will prevent NPM from fussing with @vue/composition-api. It also prevents any warnings from being emitted.

"peerDependenciesMeta": {
  "@vue/composition-api": {
    "optional": true
  }
}

[Berkmann18]

Same issue here with vue@3.0.11 on an Ionic Vue project.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: compriz@0.0.1
npm ERR! Found: vue@3.0.11
npm ERR! node_modules/vue
npm ERR!   vue@"^3.0.0-rc.10" from the root project
npm ERR!   peer vue@"^2.0.0 || >=3.0.0-rc.0" from vuefire@3.0.0-alpha.2
npm ERR!   node_modules/vuefire
npm ERR!     vuefire@"3.0.0-alpha.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@">= 2.5 < 3" from @vue/composition-api@1.0.0-rc.8
npm ERR! node_modules/@vue/composition-api
npm ERR!   peer @vue/composition-api@"^1.0.0-beta.1" from vuefire@3.0.0-alpha.2
npm ERR!   node_modules/vuefire
npm ERR!     vuefire@"3.0.0-alpha.2" 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.

[khteh]

Any update on this almost one year on?

[khteh]

#898

[ghost]

@kiontupper Your suggestion seems good but doesn't work for application using Quasar framework since the Vue package dependency is brought in by Quasar but not the application.

[khteh]

When will we have the release with the fix?

[posva]

This seems to be fixed now, at least with npm 8 there isn't an error when installing vuefire after vue. Let me know if this is still causing a problem but it's worth noting that pinia also faced this issue beacuse it relies on vue-demi but maybe here we can just safely remove vue-demi as both Vue 3 and Vue 2.7 should expose the necessary API