Why npm install keeps giving dependency error? - reactjs

While running npm install i got the following error:
While resolving: material-app#3.0.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#"^0.14.9 || ^15.3.0 || ^16.0.0" from react-quill#1.3.5
npm ERR! node_modules/react-quill
npm ERR! dev react-quill#"1.3.5" 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 tried removing package-json and deleting node modules and reinstalling them but still couldn't solve it. Please give me suggestion on how to fix it.

It seems react-quill 1.3.5 uses React ^16.0.0 and not React ^17.0.0 as a dependency while you are running React v17.
From this other post :
Due to the large number of modules that haven't specifically added React v17 as a peerDependency, it's now commonplace to encounter the unable to resolve dependency tree error when running npm installs within a v17 React application.
This error will fire whenever a module (or any of its own dependencies) lists a previous version of React as a peerDependency without specifically including React v17 as well.
The newer version of react-quill (v2.0.0-beta) is using React v17 so one option would be to install it.
npm install react-quill#beta
See repository issue

You have a dependency tree conflict.
Follow this:
Delete Packagelock.json
Delete Node Modules.
Update the version of react -quill in package.json to react-quill#beta OR Update the version of react-quill to beta as it supports react 17 using npm update react-quill#beta
Run npm i adn then npm start

Related

React Native - Importing #rneui (or react-native-vector-icons) always creates error and breaks projects with safe-area

I am quite new to react native, but I have a lot of experience with other languages. I am having tons of issues with projects breaking due to excessive errors. The errors usually pop up when installing new packages. Often I can bypass the errors by using '--force' or '--legacy-peer-deps' but mostly this just breaks the project more.
(BTW I create apps for mobile)
For instance I started a project with 'react-native init Name' and created a basic native navigation stack with a Home Screen. I wanted to add icons so I followed this website https://reactnativeelements.com/docs/installation which seems to be the newest docs for react elements, but right from the very first command 'npm install #rneui/themed #rneui/base' I get this error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: Sessler2022#0.0.1
npm ERR! Found: react-native-safe-area-context#4.3.1
npm ERR! node_modules/react-native-safe-area-context
npm ERR! react-native-safe-area-context#"^4.3.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-safe-area-context#"^3.1.9" from #rneui/base#4.0.0-rc.4
npm ERR! node_modules/#rneui/base
npm ERR! #rneui/base#"^4.0.0-rc.4" 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/reidtaylor/.npm/eresolve-report.txt for a full report.
Any help for this error would be helpful as well, but the bigger question is what am I doing wrong to get so many errors with packages and how can I fix them.
Thank you.
I had the same issue and solved it by installing older versions react-native-safe-area-context and react-native-elements.
Firstly, you need to uninstall your current versions of these packages, and run:
npm install react-native-elements#3.4.2
npm install react-native-safe-area-context#3.1.9
I'm using an ios simulator, so in my case, it was required to mate pods install again to update packages versions

Create react app throwing errors 'unable to resolve dependency tree' and 'fix upstream dependency conflict'

I've been trying use create react app but when I go to create it in the terminal i get this error.
Installing template dependencies using npm...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test3#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/chrisheibel/.npm/eresolve-report.txt for a full report.
npm ERR!`
I've tried using --legacy-peer-deps and --force with no luck. It will create the app but npm start does not work. Once i've created it i've tried to install/update npm and node again with no luck. I've also uninstalled node and npm globally on my computer and reinstalled with no luck, as well as turning react and react-dom in the created app to version 17 instead of 18 but had no luck there.
I'm at a bit of a loss on this one as create react app has always worked on my computer before. But maybe you guys might know if i'm missing something here and that's why I can't run npm start/ am getting all these errors.
The error message is telling you what the issue is. The important parts are:
Found: react#18.0.0
and
peer react#"<18.0.0" from #testing-library/react#12.1.5
So #testing-library/react#12.1.5 is only compatible with react <18 and you have added react 18, which breaks this rule. Upgrade #testing-library/react to a compatible version or downgrade react to < 18.
the latest version of #testing-library/react is 13. so you should likely have something like
"#testing-library/react": "^13.0.0"
in your package.json
I'd check your version of create-react-app
create-react-app --version
Mine says 5.0.0.
The documentation says to uninstall create-react-app and run it using npx. Running with npx will install the latest version:
npm uninstall -g create-react-app
npx create-react-app your-app-name
When I run create-react-app today I get a react v18 app. In some cases I've had to downgrade it to v17. I've done this as follows:
npm uninstall react react-dom
npm install react#!7 react-dom#17

FirebaseUI Dependency Conflict

I am using FirebaseUI React Components (https://github.com/firebase/firebaseui-web-react) to implement FirebaseUI Auth in a React app, which has previously worked without any issues. However, I recently upgraded Firebase to v9, and now when I try to install FirebaseUI React Components I receive a dependency conflict. Specifically, when I try:
npm install --save react-firebaseui
I receive the error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project-js-frontend#0.1.0
npm ERR! Found: firebase#9.1.3
npm ERR! node_modules/firebase
npm ERR! firebase#"^9.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer firebase#"^8.2.4" from react-firebaseui#5.0.2
npm ERR! node_modules/react-firebaseui
npm ERR! react-firebaseui#"*" 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.
Has anyone else working with FirebaseUI React Components, or FirebaseUI more broadly, encountered this error and found a solution? According to the Firebase docs, v9 is not compatible with FirebaseUI, and the issue I am encountering may be related to the issue here (https://github.com/firebase/firebaseui-web/issues/837) - however, if that's the case, is there any way to make FirebaseUI work after upgrading Firebase to v9?
According to the Firebase docs, v9 is not compatible with FirebaseUI,
...
is there any way to make FirebaseUI work after upgrading Firebase to v9?
If you want to be adventurous and try to get these things working together, you can start with npm i --save firebaseui#next. At the time of this writing, that will install firebaseui#0.600.0 which is presumably a pre-release for firebaseui#6 which is intended to add compatibility with firebase#9.
If you want to be really adventurous, you can try applying the change set at https://github.com/firebase/firebaseui-web/pull/850, but that appears to be undergoing active development (comments as of 3 days ago). Perhaps it will be merged and released in the not-too-distant future and hopefully your issue will be resolved by it.

Problem to install react-reveal animation on terminal visual studio code

Hello everybody i have a probem to install the react-reveal animation dependencie , each time when i put this command (npm install react-reveal --save) I have this problem, and i don't how i can resolve this problem, if a person had this problem or know how resolve this problem. can help me please thank you.
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: portfolio-sebastien#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.3.0 || ^16.0.0" from react-reveal#1.2.2
npm ERR! node_modules/react-reveal
npm ERR! react-reveal#"*" 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/sebastienfirouzfar/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/sebastienfirouzfar/.npm/_logs/2021-06-17T08_40_33_036Z-debug.log
This is because react-reveal has not been updated in about 4 years as you can see here https://github.com/rnosov/react-reveal. Its dependencies are looking for react 15 or 16. You have react v17 so its throwing an error that it might not work with that version.
I can confirm that react-reveal works fine for me with react v17. But you will need to install react-reveal with this command:
npm i react-reveal --legacy-peer-deps.
Or if you already have the packages in your package.json then you can install everything without the errors by using npm i --legacy-peer-deps.
An alternative option is that you can ditch react-reveal and use react-awesome-reveal instead. This package does similar fade and reveals for react but its API is slightly different and does not have all the advanced features of react-reveal. This would only be a replacement if you were using only the basic features of react-reveal.
You are having this problem probably because of cache or npm version so I will try to give you most feasible solution.
1-Delete your node_modules and package-lock.json files from your project.
2-Run npm cache clean --force in termial
3-Run npm install
4-Run npm install react-reveal --save
If it does not work you should try with different node version. You can use nvm (node version manager) which allows you to use and switch multiple node versions in your computer.
just for a quick solution you can use npm i react-reveal --force

When installing Material UI, I am prompted with a series of errors?

When I attempt to install Material UI using npm install #material-ui/core , I am prompted with many errors:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: 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#"^16.8.0" from #material-ui/core#4.11.0
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"*" 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/jordanhilado/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jordanhilado/.npm/_logs/2020-10-31T17_57_54_724Z-debug.log
How can I fix this?
npm install --save --legacy-peer-deps #material-ui/core
Material UI does not officially support React v17 yet, so use with caution.
npm ERR! peer react#"^16.8.0" from #material-ui/core#4.11.0
This line here is giving you a hint as to what is going wrong.
#material-ui/core#4.11.0 is expecting a peer dependency for react to be within the current major version allowed (in this case it seems like they have not added support for React version 17 yet).
It looks like you are on the most recent major version of React 17.0.1. The most recent version of Material-UI will support react version below 17.0.0 currently.
See this other stack overflow for an explanation on what the '^' means in version numbers.
What's the difference between tilde(~) and caret(^) in package.json?
To get around this try downgrading React to version 16, at least until Material-UI adds support for version 17.
A side note: you may not need everything it comes with but create react app is a great way to get started on React projects and not really have to worry about versioning issues.

Resources