vuejs / pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
https://pinia.vuejs.org
MIT License
12.97k stars 1.03k forks source link

npm error when installing pinia #853

Closed matthiashermsen closed 1 year ago

matthiashermsen commented 2 years ago

This issue might be a duplicate of https://github.com/posva/pinia/issues/724

I'm trying to install Pinia via npm but get a

ERESOLVE unable to resolve dependency tree

error.

Reproduction

The project setup on Win10:

image

I created a temporary repository showing the inial commit after creating the project with the Vue CLI

https://github.com/matthiashermsen/temp-pinia

Steps to reproduce the behavior

  1. Clone the repository
  2. Run npm install
  3. Run npm install pinia
  4. You should get an error

Expected behavior

It should install the package without errors.

Actual behavior

This is the terminal error on Win10

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: repo@0.0.0-development
npm ERR! Found: vue@3.2.22
npm ERR! node_modules/vue
npm ERR!   peerOptional vue@"^2 || ^3.0.0-0" from @vue/babel-preset-app@4.5.15
npm ERR!   node_modules/@vue/babel-preset-app
npm ERR!     @vue/babel-preset-app@"^4.5.15" 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!   peer vue@"3.2.22" from @vue/server-renderer@3.2.22
npm ERR!   node_modules/@vue/server-renderer
npm ERR!     @vue/server-renderer@"3.2.22" from vue@3.2.22
npm ERR!   5 more (@vue/test-utils, primevue, vue-jest, vue-router, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! pinia@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue@3.2.23
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 3" from @vue/composition-api@1.4.0
npm ERR!   node_modules/@vue/composition-api
npm ERR!     peerOptional @vue/composition-api@"^1.4.0" from pinia@2.0.4
npm ERR!     node_modules/pinia
npm ERR!       pinia@"*" 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 C:\Users\me\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\me\AppData\Local\npm-cache\_logs\2021-11-26T09_39_36_434Z-debug.log

and this is the npm log file

0 verbose cli [
0 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
0 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli   'install',
0 verbose cli   'pinia'
0 verbose cli ]
1 info using npm@8.1.0
2 info using node@v16.13.0
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 4ms
6 timing config:load:builtin Completed in 4ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:C:\Users\me\Repositories\repo\.npmrc Completed in 0ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:C:\Users\me\.npmrc Completed in 1ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\me\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 11ms
19 timing npm:load:configload Completed in 11ms
20 timing npm:load:setTitle Completed in 0ms
21 timing npm:load:setupLog Completed in 1ms
22 timing config:load:flatten Completed in 2ms
23 timing npm:load:cleanupLog Completed in 2ms
24 timing npm:load:configScope Completed in 0ms
25 timing npm:load:projectScope Completed in 1ms
26 timing npm:load Completed in 18ms
27 timing arborist:ctor Completed in 1ms
28 timing idealTree:init Completed in 1304ms
29 timing idealTree:userRequests Completed in 4ms
30 silly idealTree buildDeps
31 silly fetch manifest pinia@*
32 timing arborist:ctor Completed in 0ms
33 http fetch GET 200 https://registry.npmjs.org/pinia 1424ms (cache revalidated)
34 silly fetch manifest @vue/composition-api@^1.4.0
35 http fetch GET 200 https://registry.npmjs.org/@vue%2fcomposition-api 87ms (cache revalidated)
36 silly fetch manifest vue@^3.0.0
37 http fetch GET 200 https://registry.npmjs.org/vue 55ms (cache revalidated)
38 silly fetch manifest vue@>= 2.5 < 3
39 silly fetch manifest typescript@~4.1.5
40 http fetch GET 200 https://registry.npmjs.org/typescript 60ms (cache revalidated)
41 silly fetch manifest typescript@^4.4.4
42 timing idealTree Completed in 2998ms
43 timing command:install Completed in 3012ms
44 verbose stack Error: could not resolve
44 verbose stack     at PlaceDep.failPeerConflict (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:544:25)
44 verbose stack     at PlaceDep.place (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:197:21)
44 verbose stack     at new PlaceDep (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:71:10)
44 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:944:31
44 verbose stack     at Array.map (<anonymous>)
44 verbose stack     at Arborist.[buildDepStep] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:944:8)
44 verbose stack     at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:216:7)
44 verbose stack     at async Promise.all (index 1)
44 verbose stack     at async Arborist.reify (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:149:5)
44 verbose stack     at async Install.install (C:\Program Files\nodejs\node_modules\npm\lib\install.js:170:5)
45 verbose cwd C:\Users\me\Repositories\repo
46 verbose Windows_NT 10.0.19042
47 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "pinia"
48 verbose node v16.13.0
49 verbose npm  v8.1.0
50 error code ERESOLVE
51 error ERESOLVE could not resolve
52 error
53 error While resolving: [1mrepo[22m@[1m0.0.0-development[22m
53 error Found: [1mvue[22m@[1m3.2.22[22m[2m[22m
53 error [2mnode_modules/vue[22m
53 error   peerOptional [1mvue[22m@"[1m^2 || ^3.0.0-0[22m" from [1m@vue/babel-preset-app[22m@[1m4.5.15[22m[2m[22m
53 error   [2mnode_modules/@vue/babel-preset-app[22m
53 error     [1m@vue/babel-preset-app[22m@"[1m^4.5.15[22m" from [1m@vue/cli-plugin-babel[22m@[1m4.5.15[22m[2m[22m
53 error     [2mnode_modules/@vue/cli-plugin-babel[22m
53 error       [33mdev[39m [1m@vue/cli-plugin-babel[22m@"[1m~4.5.0[22m" from the root project
53 error   [35mpeer[39m [1mvue[22m@"[1m3.2.22[22m" from [1m@vue/server-renderer[22m@[1m3.2.22[22m[2m[22m
53 error   [2mnode_modules/@vue/server-renderer[22m
53 error     [1m@vue/server-renderer[22m@"[1m3.2.22[22m" from [1mvue[22m@[1m3.2.22[22m
53 error   5 more (@vue/test-utils, primevue, vue-jest, vue-router, the root project)
53 error
53 error Could not resolve dependency:
53 error [1mpinia[22m@"[1m*[22m" from the root project
53 error
53 error Conflicting peer dependency: [1mvue[22m@[1m3.2.23[22m[2m[22m
53 error [2mnode_modules/vue[22m
53 error   [35mpeer[39m [1mvue[22m@"[1m>= 2.5 < 3[22m" from [1m@vue/composition-api[22m@[1m1.4.0[22m[2m[22m
53 error   [2mnode_modules/@vue/composition-api[22m
53 error     peerOptional [1m@vue/composition-api[22m@"[1m^1.4.0[22m" from [1mpinia[22m@[1m2.0.4[22m[2m[22m
53 error     [2mnode_modules/pinia[22m
53 error       [1mpinia[22m@"[1m*[22m" from the root project
53 error
53 error Fix the upstream dependency conflict, or retry
53 error this command with --force, or --legacy-peer-deps
53 error to accept an incorrect (and potentially broken) dependency resolution.
53 error
53 error See C:\Users\me\AppData\Local\npm-cache\eresolve-report.txt for a full report.
54 verbose exit 1

Additional information

Based on https://github.com/posva/pinia/issues/724#issuecomment-944964417 I think it points to the correct url ( https://registry.npmjs.org/pinia )

Based on https://github.com/posva/pinia/discussions/727#discussioncomment-1493365 I think there is no @vue/compositon-api package installed. I tested npm remove @vue/composition-api too.

posva commented 2 years ago

Using --legacy-peer-deps, npm 7, yarn, or pnpm should work as a workaround. I found https://github.com/npm/cli/issues/4104 which could be related. Any help on this is appreciated!

Edit: Apparently, this is okay from npm perspective and they expect users to use overrides to pin the vue version

matthiashermsen commented 2 years ago

@posva I used npm install -g npm@7 to downgrade my npm version to v7.24.2 but that didn't help.

Running npm install pinia --legacy-peer-deps works but that could be dangerous in the future, no?

LinusBorg commented 2 years ago

Well, the hope would be that this gets fixed in npm in the not too distant future ...

awacode21 commented 2 years ago

Same on Mac (MacBook Pro (13-inch, M1, 2020), macOS Monterey)

awacode@awacode-MBP13 nuxt3-bivignano % npm install pinia @pinia/nuxt
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vue@3.2.26
npm ERR! node_modules/vue
npm ERR!   peer vue@"3.2.26" from @nuxt/vite-builder@3.0.0-27338323.1e98259
npm ERR!   node_modules/@nuxt/vite-builder
npm ERR!     @nuxt/vite-builder@"npm:@nuxt/vite-builder-edge@3.0.0-27338323.1e98259" from nuxt3@3.0.0-27338323.1e98259
npm ERR!     node_modules/nuxt3
npm ERR!       dev nuxt3@"^3.0.0-27338323.1e98259" from the root project
npm ERR!   peer vue@"3.2.26" from @nuxt/webpack-builder@3.0.0-27338323.1e98259
npm ERR!   node_modules/@nuxt/webpack-builder
npm ERR!     @nuxt/webpack-builder@"npm:@nuxt/webpack-builder-edge@3.0.0-27338323.1e98259" from nuxt3@3.0.0-27338323.1e98259
npm ERR!     node_modules/nuxt3
npm ERR!       dev nuxt3@"^3.0.0-27338323.1e98259" from the root project
npm ERR!   5 more (@vitejs/plugin-vue, @vue/server-renderer, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @pinia/nuxt@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 3" from @vue/composition-api@1.4.3
npm ERR!   node_modules/@vue/composition-api
npm ERR!     peerOptional @vue/composition-api@"^1.4.0" from pinia@2.0.9
npm ERR!     node_modules/pinia
npm ERR!       pinia@"*" from the root project
npm ERR!       1 more (@pinia/nuxt)
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/awacode/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/awacode/.npm/_logs/2022-01-10T00_12_02_442Z-debug.log
dakt commented 2 years ago

Same here. Installation explodes with "Conflicting peer dependency: vue@2.6.14" log

matthiashermsen commented 2 years ago

Using the latest node, npm and Vue cli version doesn't solve the issue.

But when moving to Vite by setting up the project via npm init vue@latest solved the issue for me :)

basickarl commented 2 years ago

Current package.json:

{ "name": "web", "version": "0.1.0", "private": true, "engines": { "node": ">=16.0.0 <17.0.0", "npm": ">=8.0.0 <9.0.0" }, "engineStrict": true, "scripts": { "config": "npm exec -- vue config", "development": "npm exec -- nodenv --env configs/.env.development --exec npm -- exec -- vue-cli-service serve", "dev": "npm run development", }, "dependencies": { "@auth0/auth0-spa-js": "1.20.0", "core-js": "^3.6.5", "logrocket": "2.2.0", "rollbar": "2.24.0", "vue": "^3.0.0", "vue-router": "^4.0.0-0" }, "devDependencies": { "@types/auth0": "2.34.13", "@types/jest": "24.9.1", "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/cli": "4.5.15", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-e2e-cypress": "~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-unit-jest": "~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", "@vue/test-utils": "^2.0.0-0", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^7.0.0", "firebase-tools": "10.1.0", "node-env-run": "4.0.2", "prettier": "^2.2.1", "sass": "^1.26.5", "sass-loader": "^8.0.2", "typescript": "~4.1.5", "vue-jest": "^5.0.0-0" } } Error when installing:

$ npm install --save-exact pinia npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: pinia@2.0.11 npm ERR! Found: typescript@4.1.6 npm ERR! node_modules/typescript npm ERR! peer typescript@">=2" from @vue/cli-plugin-typescript@4.5.15 npm ERR! node_modules/@vue/cli-plugin-typescript npm ERR! dev @vue/cli-plugin-typescript@"~4.5.0" from the root project npm ERR! typescript@"~4.1.5" from @vue/cli-ui@4.5.15 npm ERR! node_modules/@vue/cli-ui npm ERR! @vue/cli-ui@"^4.5.15" from @vue/cli@4.5.15 npm ERR! node_modules/@vue/cli npm ERR! dev @vue/cli@"4.5.15" from the root project npm ERR! 6 more (ts-loader, tslint, tsutils, tsutils, vue-jest, the root project) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peerOptional typescript@">=4.4.4" from pinia@2.0.11 npm ERR! node_modules/pinia npm ERR! pinia@"" from the root project npm ERR! npm ERR! Conflicting peer dependency: typescript@4.5.5 npm ERR! node_modules/typescript npm ERR! peerOptional typescript@">=4.4.4" from pinia@2.0.11 npm ERR! node_modules/pinia npm ERR! pinia@"" 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 C:\Users\karl\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\karl\AppData\Local\npm-cache_logs\2022-02-19T15_57_58_659Z-debug.log $ node -v v16.13.1

$ npm -v 8.1.2

Installed vue via the Vue CLI.

Also Am I supposed to remove Vuex manually?

KeentGG commented 2 years ago

getting the same error on a fresh nuxt 3 installation. tried all the workarounds above to no avail

bartenra commented 2 years ago
npm install --legacy-peer-deps pinia

seems to work now.

cifuentesmx commented 2 years ago

As @andrei-gheorghiu commented using yarn install && yarn add pinia works using node v16.14.0 and yarn v1.22.17

michtio commented 2 years ago

Same issue here:

Attaching to the-hub-nuxt-1
the-hub-nuxt-1  | npm ERR! code ERESOLVE
the-hub-nuxt-1  | npm ERR! ERESOLVE could not resolve
the-hub-nuxt-1  | npm ERR! 
the-hub-nuxt-1  | npm ERR! While resolving: the-hub@1.0.0-alpha.1
the-hub-nuxt-1  | npm ERR! Found: vue@3.2.33
the-hub-nuxt-1  | npm ERR! node_modules/vue
the-hub-nuxt-1  | npm ERR!   peer vue@"^3.2.0" from @headlessui/vue@1.6.1
the-hub-nuxt-1  | npm ERR!   node_modules/@headlessui/vue
the-hub-nuxt-1  | npm ERR!     @headlessui/vue@"^1.6.0" from the root project
the-hub-nuxt-1  | npm ERR!   peer vue@">= 3" from @heroicons/vue@1.0.6
the-hub-nuxt-1  | npm ERR!   node_modules/@heroicons/vue
the-hub-nuxt-1  | npm ERR!     @heroicons/vue@"^1.0.6" from the root project
the-hub-nuxt-1  | npm ERR!   1 more (nuxt)
the-hub-nuxt-1  | npm ERR! 
the-hub-nuxt-1  | npm ERR! Could not resolve dependency:
the-hub-nuxt-1  | npm ERR! pinia@"^2.0.14" from the root project
the-hub-nuxt-1  | npm ERR! 
the-hub-nuxt-1  | npm ERR! Conflicting peer dependency: vue@2.6.14
the-hub-nuxt-1  | npm ERR! node_modules/vue
the-hub-nuxt-1  | npm ERR!   peer vue@">= 2.5 < 3" from @vue/composition-api@1.6.1
the-hub-nuxt-1  | npm ERR!   node_modules/@vue/composition-api
the-hub-nuxt-1  | npm ERR!     peerOptional @vue/composition-api@"^1.4.0" from pinia@2.0.14
the-hub-nuxt-1  | npm ERR!     node_modules/pinia
the-hub-nuxt-1  | npm ERR!       pinia@"^2.0.14" from the root project
the-hub-nuxt-1  | npm ERR! 
the-hub-nuxt-1  | npm ERR! Fix the upstream dependency conflict, or retry
the-hub-nuxt-1  | npm ERR! this command with --force, or --legacy-peer-deps
the-hub-nuxt-1  | npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
the-hub-nuxt-1  | npm ERR! 
the-hub-nuxt-1  | npm ERR! See /root/.npm/eresolve-report.txt for a full report.
the-hub-nuxt-1  | 
the-hub-nuxt-1  | npm ERR! A complete log of this run can be found in:
the-hub-nuxt-1  | npm ERR!     /root/.npm/_logs/2022-05-17T08_29_57_654Z-debug-0.log
the-hub-nuxt-1 exited with code 1

Imo this asks for a package for vue3 only.

Pinia 2.0 for Vue 2 Pinia 3.0 for Vue 3

Makes more sense to avoid these issues imo!

michtio commented 2 years ago

As an update tho if you specifically mention that you want to use Vue 3 in your dependencies, it all installs without issues:

"dependencies": {
    "@headlessui/vue": "^1.6.0",
    "@heroicons/vue": "^1.0.6",
    "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
    "@nuxtjs/axios": "^5.13.6",
    "@pinia/nuxt": "^0.1.9",
    "nuxt-graphql-client": "^0.0.30",
    "pinia": "^2.0.14",
    "vue": "^3.2.33"
  },
dosstx commented 2 years ago

If using nuxt3, we still need to install Vue3 in order to get Pinia to successfully install?

YuuuFen commented 2 years ago

Same terminal error here:

npm install pinia
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: maintenance_frontend@0.0.0
npm ERR! Found: vue@3.1.5
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 3.0.0 < 4" from @fortawesome/vue-fontawesome@3.0.0-5
npm ERR!   node_modules/@fortawesome/vue-fontawesome
npm ERR!     @fortawesome/vue-fontawesome@"^3.0.0-5" from the root project
npm ERR!   peer vue@"3.1.5" from @vue/compiler-sfc@3.1.5
npm ERR!   node_modules/@vue/compiler-sfc
npm ERR!     peer @vue/compiler-sfc@"^3.0.8" from @vitejs/plugin-vue@1.3.0
npm ERR!     node_modules/@vitejs/plugin-vue
npm ERR!       dev @vitejs/plugin-vue@"^1.2.3" from the root project
npm ERR!     dev @vue/compiler-sfc@"^3.1.1" from the root project
npm ERR!   2 more (vue-router, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! pinia@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue@3.2.37
npm ERR! node_modules/vue
npm ERR!   peer vue@"^2.6.14 || ^3.2.0" from pinia@2.0.14
npm ERR!   node_modules/pinia
npm ERR!     pinia@"*" 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 C:\Users\YFH_T\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\YFH_T\AppData\Local\npm-cache\_logs\2022-06-27T09_32_43_551Z-debug-0.log

Reproduction

Maximus1000 commented 2 years ago

Confirming had the same issue with nuxt@3.0.0-rc-6 with only tailwind and headless as dep. Install of pinia failed due to vue@2.6.14 peer dependency.
Solution was to install vue@latest as dependency and on re-running pinia install, success. Prefer this method rather than to use force flag or otherwise hardcode peer dependencies override. Thx @michtio .

costingeana commented 2 years ago

Hello, My initial package.json looked like: "dependencies": { "vue": "3", "pinia": "2" } and I got the same error.

I applied the following changes (as inidcated by @posva earlier in the discussion):

lucavenir commented 2 years ago

I didn't see this issue, I'm sorry @posva, I actually searched a lot on this repo but I guess I used the wrong keywords. Time wasting bothers us users too, you can easily imagine I spent quite some time to get the reproduction done right, having in mind devs' time.

ZiadJ commented 2 years ago

Somehow, I'm having to install Vue 3 on Nuxt 3.rc.9 to fix it, which is no big deal but can be quite frustrating for clueless newcomers. Hopefully, this will be fixed soon.

mu-aqib commented 2 years ago

I also face this problem. I solved this issue when installed vue3 with pinia in nuxt3. npm i vue@latest pinia @pinia/nuxt

nurRiyad commented 2 years ago

I am also facing this problem in fresh nuxt rc.11 installations.

maxdzin commented 2 years ago

Same for me when using Nuxt 3 rc11. But it works with the "overrides": { "vue": "3" }, workaround in package.json.

kosmeln commented 2 years ago

Same issue here - not sure what would be the best "fix" that wouldn't affect anything else

lucavenir commented 2 years ago

@kosmeln @maxdzin @nurRiyad

As written above, this is an npm-related issue: there are no dependency conflicts going on.

Just run npm i -D vue@latest before running npm i -D pinia @pinia/nuxt.

This means having vue as a dev dependency within your Nuxt3 project. This may feel absurd, as Nuxt3's dev dependencies obviously already expose the latest version of Vue3, but adding that line inside package.json allows you to avoid the wrongly perceived dependency conflicts.

Just to be 100% clear, here's my package.json dependencies on a full working small personal project:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config-typescript": "^11.0.0",
    "@nuxtjs/tailwindcss": "^5.3.3",
    "@pinia/nuxt": "^0.4.2",
    "@vueuse/core": "^9.2.0",
    "@vueuse/nuxt": "^9.2.0",
    "eslint": "^8.23.1",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-prettier": "^4.2.1",
    "nuxt": "3.0.0-rc.10",
    "pinia": "^2.0.20",
    "vue": "^3.2.39",
    "@nuxt/test-utils-edge": "^3.0.0-rc.11-27722063.c1ed6ec",
    "vitest": "^0.23.2"
  }
}

You can copy / paste this if anything goes wrong and just run npm install afterwards.

lacorde commented 1 year ago

I had the same issue with packages such as vuelidate or vue-leaflet. Simply adding "vue": "^3.2.39" to my package.json and restarting npm install fixed it, as mentioned by @lucavenir.

But npm warnings are still showing on each install, any ideas how to remove them ?

cdefy commented 1 year ago

Just to share how I ended up here, if it can help others.

I didn't have any trouble installing pinia and @pinia/nuxt but conflicting dependencies came when I tried to install @vuepic/vue-datepicker

While resolving: undefined@undefined
npm ERR! Found: vue@3.2.40
npm ERR! node_modules/vue
npm ERR!   peer vue@">=3.2.0" from @vuepic/vue-datepicker@3.5.2
npm ERR!   node_modules/@vuepic/vue-datepicker
npm ERR!     @vuepic/vue-datepicker@"*" from the root project
npm ERR!   vue@"^3.2.39" from nuxt@3.0.0-rc.11
npm ERR!   node_modules/nuxt
npm ERR!     dev nuxt@"3.0.0-rc.11" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! pinia@"^2.0.23" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 2.7" from @vue/composition-api@1.7.1
npm ERR!   node_modules/@vue/composition-api
npm ERR!     peerOptional @vue/composition-api@"^1.4.0" from pinia@2.0.23
npm ERR!     node_modules/pinia
npm ERR!       pinia@"^2.0.23" from the root project

I reckon because one is asking for a version after 3.2 and the other one for a version before 2.7 Installing vue in my dependencies fixed the npm i but I would like to understand why pinia is forcing this old version? (If I understood the log correctly)

Thanks for your work!

AloisSeckar commented 1 year ago

Well, the hope would be that this gets fixed in npm in the not too distant future ...

10 months... Is it the distant future yet? :D

ghost commented 1 year ago

Any news on that ? I can't even run boilerplate code meaning basic nuxt3 quickstart code with 1 simple pinia store.

lucavenir commented 1 year ago

@Fbartoli read the above comments to make it work. It's a silly npm error.

AloisSeckar commented 1 year ago

Any news on that ? I can't even run boilerplate code meaning basic nuxt3 quickstart code with 1 simple pinia store.

just add "overrides": { "vue": 3 } into package.json and re-run npm install, works like charm in all my current Nuxt 3 projects

AloisSeckar commented 1 year ago

just add "overrides": { "vue": 3 } into package.json and re-run npm install, works like charm in all my current Nuxt 3 projects

So, this "works like charm" solution stopped working for me now with pinia 2.0.27. But just a slight modification helped:

"overrides": { 
    "vue": "latest"
}
maxdzin commented 1 year ago

So, this "works like charm" solution stopped working for me now with pinia 2.0.27. But just a slight modification helped:

"overrides": { 
    "vue": "latest"
}

Same for me.

Squadz commented 1 year ago

I confirm, this work pretty well with pinia 2.0.27. "overrides": { "vue": "latest" }

rhengles commented 1 year ago

I tried this overrides solution and it changed absolutely nothing for me.

All I did was this:

// from https://github.com/antfu/vitesse-nuxt3
npx degit antfu/vitesse-nuxt3 my-nuxt3-app
cd my-nuxt3-app
pnpm i
pnpm dev // Error!
rm -rf node_modules pnpm-lock.yaml
// add "overrides" to package.json
pnpm i
pnpm dev // Still error!

// Error:
// Cannot find package '@vue/composition-api' imported from /home/user/my-nuxt3-app/node_modules/.pnpm/vue-demi@0.13.11/node_modules/vue-demi/lib/index.mjs

https://github.com/nuxt/nuxt.js/issues/14789

EDIT: The error below happens even without installing pinia, so I guess it's 100% fault of Nuxt itself.

I even tried downloading this example and installing locally... I had two errors, the first because it didn't find the package vue, and the second because it didn't find the package vue-router. After I installed these, I got the following error:

500
Cannot read properties of undefined (reading 'modules')

at _sfc_main.setup (./node_modules/.pnpm/nuxt@3.0.0/node_modules/nuxt/dist/app/components/nuxt-root.vue:67:16)
at callWithErrorHandling (./node_modules/.pnpm/@vue+runtime-core@3.2.45/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)
at setupStatefulComponent (./node_modules/.pnpm/@vue+runtime-core@3.2.45/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7176:29)
at setupComponent (./node_modules/.pnpm/@vue+runtime-core@3.2.45/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7131:11)
at renderComponentVNode (./node_modules/.pnpm/@vue+server-renderer@3.2.45_vue@3.2.45/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)
at renderToString (./node_modules/.pnpm/@vue+server-renderer@3.2.45_vue@3.2.45/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:450:26)
at Object.renderToString$1 [as renderToString] (./.nuxt/dev/index.mjs:585:24)
at Object.renderToString (./node_modules/.pnpm/vue-bundle-renderer@1.0.0/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:40)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async ./.nuxt/dev/index.mjs:645:21

This is what's inside nuxt-root.vue file at line 16 (it has 36 lines in total)

 8 | <script setup>
 9 | import { defineAsyncComponent, onErrorCaptured, provide } from 'vue'
10 | import { callWithNuxt, isNuxtError, showError, useError, useRoute, useNuxtApp } from '#app'
11 | import AppComponent from '#build/app-component.mjs'
12 | 
13 | const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs').then(r => r.default || r))
14 | 
15 | const nuxtApp = useNuxtApp()
16 | const onResolve = nuxtApp.deferHydration()
17 | 
18 | // Inject default route (outside of pages) as active route
19 | provide('_route', useRoute())
xwellingtonx commented 1 year ago

I can confirm that "overrides": { "vue": "latest" } works for pinia 2.0.28

Cyclodex commented 1 year ago

I followed the instructions, and had the same issue, npm did not want to install pinia because of the version conflict. Maybe it would make sense to document this on the following page

https://pinia.vuejs.org/ssr/nuxt.html#installation

It's just frustrating when you follow instructions and it doesn't work as expected :(

AloisSeckar commented 1 year ago

The error mentioned, that you can try the command with the option --legacy-peer-deps or --force and indeed, the installation works when I run: npm install -D pinia --legacy-peer-deps, so this would be an other solution for now, next to the "overrides" option in package.json

yes, this works as well, but it makes your app less portable - you need to tell everyone to use --legacy-peer-deps when running their local npm install, you need to include it in CI/CD pipelines...

after including overrides in package.json you don't need to worry about this, so from my point of view, it is much better fix

or it doesn't work for you now? something may change as new versions of npm packages come out...

Cyclodex commented 1 year ago

@AloisSeckar Sorry, I was a bit too fast with my comment and had to read the whole story above first... :/

It works with the override, but I think for new users, coming with Nuxt 3 for example and add Pinia, we should place a comment in the documentation to help them going forward, and not search for this issue here... What do you think?

AloisSeckar commented 1 year ago

@AloisSeckar Sorry, I was a bit too fast with my comment and had to read the whole story above first... :/

It works with the override, but I think for new users, coming with Nuxt 3 for example and add Pinia, we should place a comment in the documentation to help them going forward, and not search for this issue here... What do you think?

Not bad idea at all. Since pinia docs allow quick change suggestions via GitHub, you inspired me to propose one: https://github.com/vuejs/pinia/pull/1901

Cyclodex commented 1 year ago

@AloisSeckar cool thanks!

oscarhumbertomr commented 1 year ago

I just delete package-lock.json and then ran npm install pinia

maxallaneccles commented 1 year ago

"overrides": { "vue": "latest" }

add this to package.json

awacode21 commented 1 year ago

"overrides": { "vue": "latest" }

add this to package.json

That solves the issue and is also documented on pinia: https://pinia.vuejs.org/ssr/nuxt.html as a "Tip"

C17AN commented 8 months ago
// Error!
npm ERR! code EOVERRIDE
npm ERR! Override for vue@^3.2.40 conflicts with direct dependency

npm ERR! A complete log of this run can be found in:
// package.json
  "overrides": {
    "vue": "latest"
  }

Hi, I'm getting above error with setting overrides property on package.json. Is there any ways to install pinia without using --legacy-peer-deps flag?

AloisSeckar commented 8 months ago
npm ERR! Override for vue@^3.2.40 conflicts with direct dependency

I believe this is because some other dependency pins vue to certain lower version.

You can try npm ls --all to see which one is causing it.

jmarshall9120 commented 4 weeks ago

I just implemented the override workaround. Isn't the real problem here however, how pinia is referencing packages and vue versions? Shouldn't that be resolved?