unable to install leva, got error on "unable to resolve dependency tree"

[hopezh]

I got the following error while installing leva:

╰─ npm i leva          
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/react-icons@1.1.1
npm ERR!   node_modules/@radix-ui/react-icons
npm ERR!     @radix-ui/react-icons@"^1.0.3" from r3f-perf@6.5.0
npm ERR!     node_modules/r3f-perf
npm ERR!       r3f-perf@"6.5" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @react-spring/animated@9.6.1
npm ERR!   node_modules/@react-spring/animated
npm ERR!     @react-spring/animated@"~9.6.1" from @react-spring/core@9.6.1
npm ERR!     node_modules/@react-spring/core
npm ERR!       @react-spring/core@"~9.6.1" from @react-spring/three@9.6.1
npm ERR!       node_modules/@react-spring/three
npm ERR!         @react-spring/three@"^9.3.1" from @react-three/drei@9.48.2
npm ERR!         node_modules/@react-three/drei
npm ERR!     @react-spring/animated@"~9.6.1" from @react-spring/three@9.6.1
npm ERR!     node_modules/@react-spring/three
npm ERR!       @react-spring/three@"^9.3.1" from @react-three/drei@9.48.2
npm ERR!       node_modules/@react-three/drei
npm ERR!         peer @react-three/drei@"*" from r3f-perf@6.5.0
npm ERR!         node_modules/r3f-perf
npm ERR!         1 more (the root project)
npm ERR!   18 more (@react-spring/core, @react-spring/shared, ...)
npm ERR! 

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8 || ^17.0" from @radix-ui/react-portal@0.1.4
npm ERR! node_modules/leva/node_modules/@radix-ui/react-portal
npm ERR!   @radix-ui/react-portal@"^0.1.3" from leva@0.9.34
npm ERR!   node_modules/leva
npm ERR!     leva@"*" 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/minioat/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/minioat/.npm/_logs/2022-12-29T17_12_11_451Z-debug.log

I have the following npm packages installed for this local project:

├── @react-three/drei@9.48.2
├── @react-three/fiber@8.9.1
├── r3f-perf@6.5.0
├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
└── three@0.145.0

I found the following suggestions from StackOverflow, and they worked. However, I still don't know what was causing the error. So, can anyone advise? Thanks.

npm install --save --legacy-peer-deps
npm config set legacy-peer-deps true
npm cache clean --force

Source: https://stackoverflow.com/a/71786513/2559693

After applying the suggestions above, my local npm packages are:

╰─ npm --version 
7.13.0

╰─ npm list     
├── @react-three/drei@9.48.2
├── @react-three/fiber@8.9.1
├── leva@0.9.34
├── r3f-perf@6.5.0
├── react-dom@18.2.0
├── react-scripts@5.0.1
├── react@18.2.0
└── three@0.145.0

[dbismut]

Would be great if there was a way to reproduce this.

[hopezh]

Would be great if there was a way to reproduce this.

Would it be helpful to share the debug log file as indicated at the end of the error message above? If it is, kindly advise me a way to share the file over there (or, just post the length contents of the log file here?)

[dbismut]

No i would need a repro repository where this can happen systematically.

[TimPietrusky]

@dbismut I ran into the problem when using https://github.com/jpedroschmitz/typescript-nextjs-starter as a starter repo. When I do the following, I can reproduce the error from the OP:

npx create-next-app -e https://github.com/jpedroschmitz/typescript-nextjs-starter problem-installing-leva
cd problem-installing-leva
npm install leva

[milotoor]

@dbismut It's very easy to reproduce this:

mkdir tmp
cd tmp
npm init
npm install react@18
npm install leva@latest

[warning or error depending on npm version]

leva_dependencies_issue.mp4

When I run this with npm 9.2.0 I get about 30 messages:

npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
...

Running npm ls --depth 2 then throws an error. Here is the start of the error message:

npm ERR! code ELSPROBLEMS
npm ERR! invalid: react@18.2.0 /Users/milotoor/projects/tmp/node_modules/react
tmp@1.0.0 /Users/milotoor/projects/tmp
├─┬ leva@0.9.34
│ ├─┬ @radix-ui/react-portal@0.1.4
│ │ ├── @babel/runtime@7.20.13
│ │ ├── @radix-ui/react-primitive@0.1.4
│ │ ├── @radix-ui/react-use-layout-effect@0.1.0
│ │ ├── react-dom@17.0.2 deduped
│ │ └── react@18.2.0 deduped invalid: "^16.8 || ^17.0" from node_modules/leva/node_modules/@radix-ui/react-portal

The issue is that react version 18.2 is incompatible with the versions of @radix-ui/react-portal (0.1.3) and @radix-ui/react-tooltip (0.1.6). Both of those packages now have a version 1.0 which supports react 18. The solution to this could be as simple as upgrading leva's dependencies to v1.0, though I have no idea what breaking changes that might entail.

[milotoor]

I see that this has already been done on the one branch and so the issue should go away with version 1.0

[arcasoy]

It seems like this issue has been resolved by @CodyJasonBennett in #453, but the deploy never went through, as the latest leva release was in October, but this PR was merged in April. I am looking to install Leva now and am getting this error. Considering the work seems to be complete, is there any way this change can be deployed?

[CodyJasonBennett]

cc @drcmda. If I can clear CI, looks like it should automatically redeploy.

[dbismut]

I'll try to handle this @CodyJasonBennett

[dbismut]

@arcasoy @CodyJasonBennett 0.9.35 has been released (untested). The Storybook deployment from Vercel seems to crash now (I updated the node settings without luck). In any case, the foundation of this project is pretty old so I'm not surprised if external CICD doesn't work anymore.

There's a new #412 branch that should be the future of this project, but at the moment I'm really too busy at work + personal stuff to allocate my free time on this.