Unable to resolve dependency tree Reactjs

Question

I am trying to install react-tinder-card in my current project. So I am trying 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: [1mtinder-clone[22m@[1m0.1.0[22m
41 error Found: [1mreact[22m@[1m17.0.1[22m[2m[22m
41 error [2mnode_modules/react[22m
41 error   [1mreact[22m@"[1m^17.0.1[22m" from the root project
41 error
41 error Could not resolve dependency:
41 error [35mpeer[39m [1mreact[22m@"[1m^16.8.0[22m" from [1mreact-tinder-card[22m@[1m1.3.1[22m[2m[22m
41 error [2mnode_modules/react-tinder-card[22m
41 error   [1mreact-tinder-card[22m@"[1m*[22m" 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. Thank you in advance.

Hi Sunil! I have just posted an answer to a similar question here: https://stackoverflow.com/questions/64701308/graphql-eresolve-unable-to-resolve-dependency-tree-when-building-my-docker-conta/64744566#64744566. The core of the problem that you're facing is exactly the same, only the details differ. This answer should guide you in the right direction. — Avius, Nov 09 '20 at 00:53

score 109 · Answer 1 · edited Dec 12 '20 at 12:23

109

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

edited Dec 12 '20 at 12:23

dippas

58,591
15
114
126

answered Dec 12 '20 at 09:53

Vaibhav Dhawale

1,115
1
7
2

50

And what exactly will do this command? Please explain it for other users. – SwissCodeMen Dec 12 '20 at 13:00
1

I have found @Arosha 's answer to be more helpful, the package will install with the --legacy flag, but the module doesn't work. It's easier to downgrade to npm 6 – Luke Vanzweden Jun 05 '21 at 15:28
1

Well, this command worked for me. But I had a question that is it a good practice, If not then what could be the alternatives to it? – Meet Bhalodiya May 16 '22 at 04:54
Recently i had this problem and my solution was to update my node version from 14 to 16 – Gabriel Rodrigues Jun 04 '22 at 17:13

score 86 · Answer 2 · edited Dec 01 '20 at 23:57

86

This error comes from version 7.x of npm.

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

edited Dec 01 '20 at 23:57

Dean James

2,491
4
21
29

answered Dec 01 '20 at 15:33

Mon

861
5
4

1

Source: https://blog.npmjs.org/post/626173315965468672/npm-v7-series-beta-release-and-semver-major Check Peer Dependencies section. – Pradeep Vig Mar 03 '21 at 07:36

score 44 · Answer 3 · answered Apr 29 '21 at 08:10

What this error basically says is that react-tinder-card@1.3.1 in it's peer dependencies has react@"^16.8.0". So it needs that version of react to function properly. On your tinder-clone@0.1.0 application you currently have react@17.0.1.

This problem can be solved manually by just installing version of react that react-tinder-card@1.3.1 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.

score 23 · Answer 4 · answered Feb 03 '22 at 10:37

23

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

answered Feb 03 '22 at 10:37

This solved the issue as most of the packages are installed with ^ and it is difficult to figure out which is actually causing the issue. – Vinkal Vishnoi Dec 27 '22 at 16:48

score 19 · Answer 5 · answered Apr 22 '21 at 19:55

19

Downgrade to npm v6. It should fix the issue.

npm install -g npm@6

answered Apr 22 '21 at 19:55

Arosha

511
1
7
19

score 5 · Accepted Answer · answered Sep 15 '21 at 16:34

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

score 3 · Answer 7 · edited Jun 25 '22 at 14:23

3

Downgrading the npm version to version 6 helped me resolve the issue.

edited Jun 25 '22 at 14:23

Barry Michael Doyle

9,333
30
83
143

answered Jun 21 '22 at 03:38

Pragya Mukherjee

31
2

node version was v18.13.0 and npm version was 8, downgrading to 6 solved the issue – Sudhir Kaushik May 21 '23 at 08:43

score 2 · Answer 8 · answered Jun 01 '21 at 23:43

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.

score 0 · Answer 9 · answered Dec 24 '21 at 09:44

0

Upgrade to npm v8. It should fix the issue.

npm install -g npm@8

answered Dec 24 '21 at 09:44

Fuubi

74
2

3

Same error on v8.3.0, need to use `--legacy-peer-deps` flag – Annie Tan Jan 04 '22 at 08:37

score 0 · Answer 10 · answered Feb 07 '23 at 20:59

0

since using --legacy-peer-deps flag wont install the dev-dependencies your react version, use --force instead.

answered Feb 07 '23 at 20:59

Nat

135
4

score -1 · Answer 11 · answered Feb 26 '23 at 22:55

-1

Try this command with --force or --legacy-peer-deps.

npm install react-script-tag --force

answered Feb 26 '23 at 22:55

Her_Dudeness

1
1

Unable to resolve dependency tree Reactjs

11 Answers11

Linked