npm chakra-ui install failing due to dependency conflicts

user_14177685 0
Viewed 2978

I'm trying to learn react/typescript and I'm following a tutorial line for line, but somehow getting this error when trying to install either @chakra-ui/react or @chakra-ui/core. It seems like a dependecy issue with react having been updated. Should I rollback react?

kyoudai.industries git:(master) ✗ npm install @chakra-ui/react framer-motion
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: kyoudai.industries@1.0.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@"16.x || 17.x" from @chakra-ui/react@1.0.1
npm ERR!   node_modules/@chakra-ui/react
npm ERR!     @chakra-ui/react@"*" from the root project
npm ERR!   2 more (@emotion/react, @emotion/styled)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8" from framer-motion@2.9.4
npm ERR! node_modules/framer-motion
npm ERR!   framer-motion@"*" from the root project
npm ERR!   peer framer-motion@"^2.9.4" from @chakra-ui/react@1.0.1
npm ERR!   node_modules/@chakra-ui/react
npm ERR!     @chakra-ui/react@"*" 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/travis/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/travis/.npm/_logs/2020-11-24T22_38_57_297Z-debug.log
chakra-ui npm reactjs node.js
2 Answers

With this command you can solve the problem:

npm i @chakra-ui/react --legacy-peer-deps

user_100764490

I had the same issue but in Vue. I ran the following commands and it started working:

vue create test -p default && cd test && vue serve src/main.js,

It seems like it created a folder running some tests.

Then I ran: npm i -g @vue/cli-service-global..

Then: npm run serve-- to initiate the vue server.

Hopefully it gives you an idea how to solve that in React. Good luck!

user_162391180
Related