npm chakra-ui install failing due to dependency conflicts - node.js

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

With this command you can solve the problem:
npm i #chakra-ui/react --legacy-peer-deps

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!

Related

Conflicting upstream dependencies

I have no idea what I need to do to get NPM install to run successfully after upgrading Node to 18.12.1 and npm to 9.2.0. I keep getting this upstream dependency error. I ran
npm install -g npm-check-updates
ncu -u
npm install
And now this is where I am.
npm install ─╯
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: hipersigno#undefined
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.0" from react-svgmt#1.2.0
npm ERR! node_modules/react-svgmt
npm ERR! react-svgmt#"^1.2.0" 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!
npm ERR! For a full report see:
npm ERR! /Users/mchildress/.npm/_logs/2023-01-09T16_27_29_875Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mchildress/.npm/_logs/2023-01-09T16_27_29_875Z-debug-0.log
What's going on is that react-svgmt has react 17 set as a peer dependency. This means that it is built only to support react 17. You have react 18 installed and npm sees that conflict and bails. You have the following options:
Downgrade to React 17 by using npm install --save react#^17.0.0 react-dom#^17.0.0
Indicate that you are okay with having a potentially incompatible version by using npm install --legacy-peer-deps.

npm run dev not working with webpack/babel conflict

I am trying to run npm run dev for a Vue project but I keep getting the following output:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: babel-loader#7.1.5
npm ERR! Found: webpack#5.75.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#"^5.0.0" from css-loader#6.7.2
npm ERR! node_modules/css-loader
npm ERR! dev css-loader#"^6.7.2" from the root project
npm ERR! peer webpack#"^5.20.0" from html-webpack-plugin#5.5.0
npm ERR! node_modules/html-webpack-plugin
npm ERR! dev html-webpack-plugin#"^5.5.0" from the root project
npm ERR! 8 more (postcss-loader, terser-webpack-plugin, url-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack#"2 || 3 || 4" from babel-loader#7.1.5
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader#"^7.1.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack#4.46.0
npm ERR! node_modules/webpack
npm ERR! peer webpack#"2 || 3 || 4" from babel-loader#7.1.5
npm ERR! node_modules/babel-loader
npm ERR! dev babel-loader#"^7.1.1" 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.
I have no idea what to do, I have tried uninstalling vue-cli and tried re-installing it (I'm not sure if this messed up my packages). Is there a way to cleanly delete everything and start fresh? If anyone can help that would be much appreciated!
Update:
I tried starting a new project with vue init webpack frontend in a new folder and tried installing axios and am getting the following error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: vuex#4.1.0
npm ERR! Found: vue#2.7.14
npm ERR! node_modules/vue
npm ERR! vue#"^2.5.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^3.2.0" from vuex#4.1.0
npm ERR! node_modules/vuex
npm ERR! vuex#"^4.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vue#3.2.45
npm ERR! node_modules/vue
npm ERR! peer vue#"^3.2.0" from vuex#4.1.0
npm ERR! node_modules/vuex
npm ERR! vuex#"^4.1.0" 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.
I recently updated my version of node (v19.1.0) and npm (v8.19.3), could that be an issue? It generally seems like I am getting a bunch of conflicts every time I try to install new packages. Is there a way to just start clean?
Probably one of your packages is outdated, according to the error. I guess it's the babel loader.
Method 1 Upgrading or Updating your packages might solve the dependency error.
Method 2 Try running npm install --force or npm install --legacy-peer-deps. It should work.

npm install fails - version mismatch

i am new to npm, and have trouble running npm install on this repo: https://github.com/ttencate/jfxr
after the initial install failed with error code 1, i found resources pointing towards updating the package versions.
after running
npx npm-check-updates -u
npm install still fails, this time with a reasonable error stack:
p#MBP-von-up app % npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: jfxr-app#0.14.0
npm ERR! Found: eslint#8.19.0
npm ERR! node_modules/eslint
npm ERR! dev eslint#"^8.19.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint#">=1.6.0 <7.0.0" from eslint-loader#2.2.1
npm ERR! node_modules/eslint-loader
npm ERR! dev eslint-loader#"^2.1.1" 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/tp/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/tp/.npm/_logs/2022-07-05T13_34_08_046Z-debug-0.log
but i am still unclear on how to resolve this version mismatch.
also, running with the old version would be fine for me too, if it worked at all...
any help / tips towards resources appreciated!

Npm unable to install template dependencies

I am currently trying to create-react-app with --template typescript but I am getting the following error:
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: client#0.1.0
npm ERR! Found: react#18.0.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"<18.0.0" from #testing-library/react#12.1.5
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^12.0.0" 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/BrianKim/.npm/eresolve-report.txt for a full report.
I've tried updating npm as well as node, but cannot get create-react-app to work at all. Please let me know what I could do, thanks!
I just installed "yarn" using "npm install --global yarn" and after that I installed react using "yarn create react-app my-app --template typescript" and everything worked fine for me without errors.

Unable to install Radium using npm comand

Command
npm install --save radium
Error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: react-complete-guid-1#0.1.0
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0 || ^17.0.0" from radium#0.26.2
npm ERR! node_modules/radium
npm ERR! radium#"*" 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\Max\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\Max\AppData\Local\npm-cache\_logs\2022-09-09T12_51_53_580Z-debug-0.log
Note: I am trying to install radium but this error is showing. I don't know why.
try to remove your node_modules and run npm install again, it's a common problem that something went wrong with the installation.
rm -rf node_modules/
npm install --save radium --force
This command will remove node_modules and then install the dependencies from your package.json file and install radium library.
Next time try to post your error in text here not an image so it's easier for other developers to troubleshoot your error. You could also look at: How to ask questions Stackoverflow

Resources