issue installing npm package, react-circular-progressbar - javascript

When I install react-circular-progressbar into my react projects it show an error why?
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: nadeems-portfolio#0.1.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!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from react-circular-progressbar#2.0.3
npm ERR! node_modules/react-circular-progressbar
npm ERR! react-circular-progressbar#"*" 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 /home/nadeem/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/nadeem/.npm/_logs/2020-12-05T09_58_59_238Z-deb

This is because one of the depencies can not be resolved combined with your current dependencies.
The following part indicates that ciruclar-progressbar (version 2.0.3) requires react 15 or 16 as a peer dependency, and you are using a newer version in your dependency list.
Could not resolve dependency: peer react#"^0.14.0 || ^15.0.0 || ^16.0.0" from react-circular-progressbar#2.0.3
There are a few solutions;
Downgrade the package that doesn't fit in the constraints of the package that you want to install
Look for a version of the package that you are trying to install that has updated their peer dependencies to include react 17
use npm install <package-name> --force to ignore it (really not recommended, unless you have manually verified there are no incompatibilities)
use npm install <package-name> --legacy-peer-deps.
The first two options are deduced from the error you have given. Whereas the last two options are provided in the error itself.

Related

Does new version of Gatsby not work with Material UI?

I am running into this error
portfolio % npm install gatsby-theme-material-ui
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project#1.0.0
npm ERR! Found: gatsby#5.3.3
npm ERR! node_modules/gatsby
npm ERR! gatsby#"^5.3.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby#"^3.0.0 || ^4.0.0" from gatsby-theme-material-ui#5.3.0
npm ERR! node_modules/gatsby-theme-material-ui
npm ERR! gatsby-theme-material-ui#"*" from the root project
npm ERR!
Within my gatsby config I have the plugin but am noticing some weird styling for production. I assumed it was because it is missing something like gatsby-theme-material-ui for it to work.
Any ideas?
gatsby-theme-material-ui is not an official plugin so it's only maintained and supported by his author and contributors so its actual state is quite deprecated. This means that you are relying on Gatsby's package version which is expecting a version 3 or 4 (gatsby#"^3.0.0 || ^4.0.0") while you have the 5.3.3.
If looking for other alternative plugins is not an option, you can bypass the dependency tree issue by running:
npm install gatsby-theme-material-ui --legacy-peer-deps
The --legacy-peer-deps will resolve the (old) legacy dependencies for the package.

How to get rid of "Conflicting Peer Depencies" error after new update

I've been trying to fix the dependencies of my project and usually I get it to work but I've been stuck on this forever now and it slowed down my progress to a halt. I saw another post where they said delete node_modules and the package-lock file and then use yarn to install everything but I can't even manage to install yarn.
Here are the errors I keep getting:
(base) Air-Aurelie:Wassupp aurelie$ npm i yarn
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-dom#18.2.0
npm ERR! Found: react#18.1.0
npm ERR! node_modules/react
npm ERR! peer react#">=16.8.0" from #openspacelabs/react-native-zoomable-view#2.1.1
npm ERR! node_modules/#openspacelabs/react-native-zoomable-view
npm ERR! #openspacelabs/react-native-zoomable-view#"^2.1.1" from the root project
npm ERR! peer react#">=16.8.0" from #react-native-community/hooks#2.8.1
npm ERR! node_modules/#react-native-community/hooks
npm ERR! #react-native-community/hooks#"^2.8.1" from the root project
npm ERR! 25 more (#react-navigation/core, #react-navigation/elements, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^18.2.0" from react-dom#18.2.0
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#">=16.8.0" from #zendeskgarden/container-field#2.1.1
npm ERR! node_modules/#zendeskgarden/container-field
npm ERR! #zendeskgarden/container-field#"^2.1.0" from #zendeskgarden/react-forms#8.62.0
npm ERR! node_modules/#zendeskgarden/react-forms
npm ERR! #zendeskgarden/react-forms#"^8.62.0" from the root project
npm ERR! peer react-dom#">=16.8.0" from #zendeskgarden/container-focusvisible#1.0.1
npm ERR! node_modules/#zendeskgarden/container-focusvisible
npm ERR! #zendeskgarden/container-focusvisible#"^1.0.0" from #zendeskgarden/react-theming#8.62.0
npm ERR! node_modules/#zendeskgarden/react-theming
npm ERR! peer #zendeskgarden/react-theming#"^8.1.0" from #zendeskgarden/react-forms#8.62.0
npm ERR! node_modules/#zendeskgarden/react-forms
npm ERR! 1 more (the root project)
npm ERR! 7 more (#zendeskgarden/container-slider, ...)
npm ERR!
npm ERR! Conflicting peer dependency: react#18.2.0
npm ERR! node_modules/react
npm ERR! peer react#"^18.2.0" from react-dom#18.2.0
npm ERR! node_modules/react-dom
npm ERR! peer react-dom#">=16.8.0" from #zendeskgarden/container-field#2.1.1
npm ERR! node_modules/#zendeskgarden/container-field
npm ERR! #zendeskgarden/container-field#"^2.1.0" from #zendeskgarden/react-forms#8.62.0
npm ERR! node_modules/#zendeskgarden/react-forms
npm ERR! #zendeskgarden/react-forms#"^8.62.0" from the root project
npm ERR! peer react-dom#">=16.8.0" from #zendeskgarden/container-focusvisible#1.0.1
npm ERR! node_modules/#zendeskgarden/container-focusvisible
npm ERR! #zendeskgarden/container-focusvisible#"^1.0.0" from #zendeskgarden/react-theming#8.62.0
npm ERR! node_modules/#zendeskgarden/react-theming
npm ERR! peer #zendeskgarden/react-theming#"^8.1.0" from #zendeskgarden/react-forms#8.62.0
npm ERR! node_modules/#zendeskgarden/react-forms
npm ERR! 1 more (the root project)
npm ERR! 7 more (#zendeskgarden/container-slider, ...)
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/aurelie/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/aurelie/.npm/_logs/2022-12-22T16_55_08_011Z-debug-0.log
Does anyone know how to get me out of this? Should I just start a new project and reinstall everything?
It's not about reinstalling. Your dependencies come with peer dependency whose version constraints conflict with your project's dependencies. Imo you have three options:
Solve the conflict. E.g. #zendeskgarden/container-field seems to require react 16.x.y (with x > 8) - and with same for react-dom -, so either you have to install a newer version of container-field with (hopefully) a newer peer-dependency (no guarantee that's the case, you've got to check it out), or you have to downgrade your project's dependencies to react 16.8.0 (or the latest of those, i.e. react 16.14.0) (same with react-dom). Either approache must be done in your package.json. Note that downgrading might require downgrades of other dependencies, too, if they depend on react 17 or react 18 while you're with react 16. You can give it a try and see how far you get. If it works, it's the cleanest and safest solution.
You can try to run npm i --legacy-peer-deps. npm was more lenient back then, in most cases it won't cause any trouble. But you never know, you're actively ignoring version constraints.
You can override peer dependencies in your package.json, which might cause issues similar to --legacy-peer-deps. For this, your package.json needs an entry like
"overrides": {
"#zendeskgarden/container-field#2.1.1": {
"react": "18.2.0",
"react-dom": "18.2.0"
}
},

Why is Mock Service Worker not installed in React project with Typescript support?

I want to include Mock Service Worker into my React project with Typescript support, but as soon as I run npm install msw --save-dev command, my terminal shows me these error messages:
PS F:\Programming\React Practices\ReactPizza\my-app> npm install msw --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: msw#0.41.0
npm ERR! Found: typescript#4.7.2
npm ERR! node_modules/typescript
npm ERR! peer typescript#">= 2.7" from fork-ts-checker-webpack-plugin#6.5.2
npm ERR! node_modules/fork-ts-checker-webpack-plugin
npm ERR! fork-ts-checker-webpack-plugin#"^6.5.0" from react-dev-utils#12.0.1
npm ERR! node_modules/react-dev-utils
npm ERR! react-dev-utils#"^12.0.1" from react-scripts#5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"5.0.1" from the root project
npm ERR! peerOptional typescript#"^3.2.1 || ^4" from react-scripts#5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"5.0.1" from the root project
npm ERR! 2 more (tsutils, the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript#">= 4.2.x <= 4.6.x" from msw#0.41.0
npm ERR! node_modules/msw
npm ERR! dev msw#"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: typescript#4.6.4
npm ERR! node_modules/typescript
npm ERR! peerOptional typescript#">= 4.2.x <= 4.6.x" from msw#0.41.0
npm ERR! node_modules/msw
npm ERR! dev msw#"*" 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\Win10\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\Win10\AppData\Local\npm-cache\_logs\2022-05-27T17_17_28_323Z-debug.log
I don't know what the matter is, and how to fix it.
My mini-project is powered by create-react-app. I mean the project was started out with this:
npx create-react-app my-app --template typescript
When I don't utilize Typescript with npx create-react-app everything is going well.
You may easily check those error messages on GitHub:https://github.com/AlexKor-5/ReactPizzaApp_Ts/tree/5849bb4cb928550dcb4bfd66ecb8b7bf0757fb9f by an attempt to install MSW.
I can only assume you're using npm 7 (since npm 6 would automatically force install it). And it's telling you what the issue is, a conflicting peer dependency, typescript.
It's also telling you how to fix it:
Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
Aka:
npm install --legacy-peer-deps
Otherwise reinstall a later/earlier version of either package so the peer dependencies can match up. Msw is using ">= 4.2.x <= 4.6.x" typescript and you have typescript#4.7.2 installed, it's breaking because msw doesn't accept your typescript version.

How to install react-paystack in Visual Studio

I am trying to install react-paystack and I am getting this error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myfapp#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^15.0.0 || ^16.0.0" from react-paystack#3.0.4
npm ERR! node_modules/react-paystack
npm ERR! react-paystack#"*" 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\Jeffrey Matthew\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\Jeffrey Matthew\AppData\Local\npm-cache\_logs\2021-08-12T05_04_04_535Z-debug.log
Any solutions, please?
I think the reason is clear. Installed react version is 17.0.2 where as react-paystack 3.0.4 requires older version (16.x).
As current react-paystack only works on react 16.x, I think the only way is to create react project with 16.x version and try again.
You might have another node_modules folder or package.json file in a parent folder.

Unable to install typewriter package in React js project

npm i typewriter-effect
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: typetest#0.1.0
npm ERR! Found: react#17.0.2
npm ERR! node_modules/react
npm ERR! react#"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"16.x" from typewriter-effect#2.17.0
npm ERR! node_modules/typewriter-effect
npm ERR! typewriter-effect#"*" 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\USER\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\USER\AppData\Local\npm-cache\_logs\2021-05-03T18_40_11_049Z-debug.log
Just add the flag --force and then run. typewriter-effect is just using an older version of react. Don't worry about the version conflict just run, for me it worked without any issue.
You have to restart your Terminal to continue installing otherwise it will give error...
I encountered this error today morning... So looking forward you can also solve this

Categories