React spring Errors while installing

Question

Hi I have this problem where if I want to install react-spring into my react project It just pops up bunch of dependencies errors and warnings and I don't know what to do with it. I tried to check documentation of react-spring but I couldn't find anything. I checked few pages here on stackoverflow and I still did not find anything useful. Can somebody help?

npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react-spring/node_modules/react
npm WARN   peer react@">=16.8" from @react-spring/[email protected]
npm WARN   node_modules/react-spring/node_modules/@react-spring/konva
npm WARN     @react-spring/konva@"^9.0.0" from [email protected]
npm WARN     node_modules/react-spring
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"16.8.x" from [email protected]
npm WARN node_modules/react-spring/node_modules/react-konva
npm WARN   peer react-konva@">=16.8" from @react-spring/[email protected]
npm WARN   node_modules/react-spring/node_modules/@react-spring/konva
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react-spring/node_modules/react
npm WARN   peer react@">=16.8" from @react-spring/[email protected]
npm WARN   node_modules/react-spring/node_modules/@react-spring/konva
npm WARN     @react-spring/konva@"^9.0.0" from [email protected]
npm WARN     node_modules/react-spring
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.0.0" from [email protected]
npm WARN node_modules/react-spring/node_modules/react-dom
npm WARN   peer react-dom@"16.8.x" from [email protected]
npm WARN   node_modules/react-spring/node_modules/react-konva
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/konva
npm WARN   peer konva@">=2.6" from @react-spring/[email protected]
npm WARN   node_modules/react-spring/node_modules/@react-spring/konva
npm WARN     @react-spring/konva@"^9.0.0" from [email protected]
npm WARN     node_modules/react-spring
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer konva@"^3.2.3" from [email protected]
npm WARN node_modules/react-spring/node_modules/react-konva
npm WARN   peer react-konva@">=16.8" from @react-spring/[email protected]
npm WARN   node_modules/react-spring/node_modules/@react-spring/konva
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN   peerOptional react-dom@">=17.0" from @react-three/[email protected]
npm WARN   node_modules/@react-three/fiber
npm WARN     peer @react-three/fiber@">=6.0" from @react-spring/[email protected]
npm WARN     node_modules/@react-spring/three
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional react-dom@">=17.0" from @react-three/[email protected]
npm WARN node_modules/@react-three/fiber
npm WARN   peer @react-three/fiber@">=6.0" from @react-spring/[email protected]
npm WARN   node_modules/@react-spring/three
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"*" from @testing-library/[email protected]
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^11.2.5" from the root project
npm ERR!   peer react@"17.0.1" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"*" from @testing-library/[email protected]
npm ERR!     node_modules/@testing-library/react
npm ERR!       @testing-library/react@"^11.2.5" from the root project
npm ERR!     peer react-dom@">=16.0.0" from [email protected]
npm ERR!     node_modules/react-visibility-sensor
npm ERR!       react-visibility-sensor@"^5.1.1" from the root project
npm ERR!     1 more (the root project)
npm ERR!   4 more (react-scripts, react-visibility-sensor, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2" from [email protected]
npm ERR! node_modules/@react-three/fiber/node_modules/react-reconciler
npm ERR!   react-reconciler@"^0.26.2" from @react-three/[email protected]
npm ERR!   node_modules/@react-three/fiber
npm ERR!     peer @react-three/fiber@">=6.0" from @react-spring/[email protected]
npm ERR!     node_modules/@react-spring/three
npm ERR!       @react-spring/three@"^9.0.0" from [email protected]
npm ERR!       node_modules/react-spring
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:\...\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

Hardesty

did u try global install? npm install -g react-spring or try npm install react-spring --save – Cassel

what version of react and react-dom are you using? – Isaiasisak

@arminyahya "react": "^17.0.1", "react-dom": "^17.0.1", – Hardesty

@Cassel I tried both on global it wont compile on --save it wont install and have same problem – Hardesty

looks like react spring dependencies needs react and react-dom 17.0.2 can u try upate this packages to this version? – Isaiasisak

Answer 1

The issue is with npm7 requiring peer deps to be installed. This is a feature of npm7, not a bug. react-spring is the global package for the library and therefore contains all our targets. Unless you really are doing an app that requires zDog, konva etc. I would install the specific target you're after.

i.e npm install @react-spring/web the /* can be replaced with any target we support, for more information please see the docs

Flatware

Coming from the GitHub issue I've opened. Thank you for adding your answer here @Josh! In my case, I needed @react-spring/web only for Next.js. – Psychodynamics

Thanks, I will try it out. P.S. I guess it will make my Stack Overflow glory down. But it was worth the run. :) – Withhold

Answer 2

Had the same problem, this suggestion fixed the installation error. Still didn't try to work with it though. Basically, we should add

"peerDependencies": {
  "react-spring": "^8.x"
}

to the package.json file

Withhold

Worked with it now, may confirm that this solution works. :) – Withhold

For me, it automaitclaly installs up to React-Spring v7. Can we upgrade it to V9? – Psychodynamics

I don 't think is the correct answer. It's probably to do with npm7 requiring all the peer deps to be in the project. – Flatware

Answer 3

Got the similar kind of problem when added "@twilio/video-room-monitor": "^1.0.1" dependency and resolved by adding "react-spring" in dependencies, reference link

 "dependencies": {
 "react-spring": "^9.6.1"

}

Forewing

Answer 4

I had the same problem using React 17.0.2 but success with run npm install -g react-spring and then go without errors but still a lot of warnings

Promotive