Unable to resolve dependency tree Reactjs

JavascriptReactjsNpmPackageTinder

Javascript Problem Overview


I am trying to install react-tinder-card in my current project.So i am tring to install the react-tinder-card but after i use the command

npm install --save react-tinder-card

All i can see in my console is:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: tinder-clone@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 react-tinder-card@1.3.1
npm ERR! node_modules/react-tinder-card
npm ERR!   react-tinder-card@"*" 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/nero/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/nero/.npm/_logs/2020-11-06T16_36_39_957Z-debug.log

When i opened the debug.log file, i found this:

0 verbose cli [0 verbose cli   '/usr/bin/node',0 verbose cli   '/usr/bin/npm',0 verbose cli   'install',0 verbose cli   '--save',0 verbose cli   'react-tinder-card'0 verbose cli ]
1 info using npm@7.0.3
2 info using node@v15.0.1
3 timing config:load:defaults Completed in 3ms
4 timing config:load:file:/usr/lib/node_modules/npm/npmrc Completed in 0ms
5 timing config:load:builtin Completed in 1ms
6 timing config:load:cli Completed in 3ms
7 timing config:load:env Completed in 1ms
8 timing config:load:file:/home/nero/Documents/MERN/tinder-clone/.npmrc Completed in 1ms
9 timing config:load:project Completed in 2ms
10 timing config:load:file:/home/nero/.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:/usr/etc/npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setUserAgent Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 12ms
19 verbose npm-session b46c4469ef66a9f2
20 timing npm:load Completed in 19ms
21 timing arborist:ctor Completed in 0ms
22 timing idealTree:init Completed in 1413ms
23 timing idealTree:userRequests Completed in 3ms
24 silly idealTree buildDeps
25 silly fetch manifest react-tinder-card@*
26 http fetch GET 200 https://registry.npmjs.org/react-tinder-card 188ms (from cache)
27 silly fetch manifest react@^17.0.1
28 timing arborist:ctor Completed in 0ms
29 http fetch GET 304 https://registry.npmjs.org/react 1196ms (from cache)
30 timing idealTree Completed in 2812ms
31 timing command:install Completed in 2815ms
32 verbose stack Error: unable to resolve dependency tree
32 verbose stack     at Arborist.[failPeerConflict] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1011:25)
32 verbose stack     at Arborist.[loadPeerSet] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:991:36)
32 verbose stack     at async Arborist.[buildDepStep] (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:760:11)
32 verbose stack     at async Arborist.buildIdealTree (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:202:7)
32 verbose stack     at async Promise.all (index 1)
32 verbose stack     at async Arborist.reify (/usr/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:121:5)
32 verbose stack     at async install (/usr/lib/node_modules/npm/lib/install.js:40:5)
33 verbose cwd /home/nero/Documents/MERN/tinder-clone
34 verbose Linux 5.4.0-52-generic
35 verbose argv "/usr/bin/node" "/usr/bin/npm" "install" "--save" "react-tinder-card"
36 verbose node v15.0.1
37 verbose npm  v7.0.3
38 error code ERESOLVE
39 error ERESOLVE unable to resolve dependency tree
40 error
41 error While resolving: tinder-clone@0.1.0
41 error Found: react@17.0.1
41 error node_modules/react
41 error   react@"^17.0.1" from the root project
41 error
41 error Could not resolve dependency:
41 error peer react@"^16.8.0" from react-tinder-card@1.3.1
41 error node_modules/react-tinder-card
41 error   react-tinder-card@"*" from the root project
41 error
41 error Fix the upstream dependency conflict, or retry
41 error this command with --force, or --legacy-peer-deps
41 error to accept an incorrect (and potentially broken) dependency resolution.
41 error
41 error See /home/nero/.npm/eresolve-report.txt for a full report.
42 verbose exit 1

I don't understand what that means. Please help me find the solution.Any sort of help would be appreciated. Thank you in advance.

Javascript Solutions


Solution 1 - Javascript

$ npm install --save react-tinder-card --legacy-peer-deps

Solution 2 - Javascript

This error comes from version 7.x of npm.

Please try again with the --legacy-peer-deps option.

Solution 3 - Javascript

What this error basically says is that [email protected] in it's peer dependencies has react@"^16.8.0". So it needs that version of react to function properly. On your [email protected] application you currently have [email protected].

This problem can be solved manually by just installing version of react that [email protected] needs which is react@"^16.8.0", so you need to downgrade your version to run the package.

The --legacy-peer-deps flag was introduced with v7 of npm as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer deps and proceed with the installation anyway. This can cause some unwanted behavior and I would not suggest it.

Solution 4 - Javascript

Downgrade to npm v6. It should fix the issue.

npm install -g npm@6

Solution 5 - Javascript

https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/

The react-apollo package has been deprecated, and the functionality offered by each of the above packages can now be accessed from @apollo/client directly:

@apollo/react-hooks -> now available directly from @apollo/client
@apollo/react-components -> now available from @apollo/client/react/components
@apollo/react-hoc -> now available from @apollo/client/react/hoc
@apollo/react-ssr -> now available from @apollo/client/react/ssr
@apollo/react-testing -> now available from @apollo/client/testing

Solution 6 - Javascript

This happens when you are trying to clone a project which is built a long time ago, and project dependencies have moved on to newer versions.

Just run below code. Works fine for me every time. You should also see this solution with the error.

 npm install --legacy-peer-deps

Solution 7 - Javascript

I had the same error above. I installed npm v6.7. I reinstalled Netlify CMS and Gatsby:

npm install netlify-cms-app@2.9 gatsby-plugin-netlify-cms@^4.0.0

I don't have anything under the static folder except a favicon.ico file. No admin folder and no .yml file.

Solution 8 - Javascript

Upgrade to npm v8. It should fix the issue.

npm install -g npm@8

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSunil ShahView Question on Stackoverflow
Solution 1 - JavascriptVaibhav DhawaleView Answer on Stackoverflow
Solution 2 - JavascriptMonView Answer on Stackoverflow
Solution 3 - JavascriptBojan TomićView Answer on Stackoverflow
Solution 4 - JavascriptAroshaView Answer on Stackoverflow
Solution 5 - JavascriptTatyana MolchanovaView Answer on Stackoverflow
Solution 6 - JavascriptShashank SinghView Answer on Stackoverflow
Solution 7 - JavascriptLarry SankeyView Answer on Stackoverflow
Solution 8 - JavascriptFuubiView Answer on Stackoverflow