The simple way to fix “Unable to resolve dependency tree” in Reactjs

Each of these pieces of code can depend on a lot of other open source code, fortunately when library management tools came out, otherwise it would take a lot of work to manage these libraries. With npm, the work will be much simpler, they help you make the management much simpler. The libraries are all available on npm, you run a command line to download them and it’s easier to include them. Today, we continue to bring another situation related to npm, which is “Unable to resolve dependency tree“. Let’s follow the solution!

When does “Unable to resolve dependency tree” occur?

The above error happens when you run the line “npm install –save react-tinder-card”. It is displayed as follows:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   [email protected]"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer [email protected]"^16.8.0" from [email protected]
npm ERR! node_modules/react-tinder-card
npm ERR!   [email protected]"*" 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

Furthermore, in the file “debug.log” appears the program as below:

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 [email protected]
2 info using [email protected]
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 [email protected]*
26 http fetch GET 200 https://registry.npmjs.org/react-tinder-card 188ms (from cache)
27 silly fetch manifest [email protected]^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[[email protected][1m0.1.0[22m
41 error Found: [1mreact[[email protected][1m17.0.1[22m[2m[22m
41 error [2mnode_modules/react[22m
41 error   [1mreact[[email protected]"[1m^17.0.1[22m" from the root project
41 error
41 error Could not resolve dependency:
41 error [35mpeer[39m [1mreact[[email protected]"[1m^16.8.0[22m" from [1mreact-tinder-card[[email protected][1m1.3.1[22m[2m[22m
41 error [2mnode_modules/react-tinder-card[22m
41 error   [1mreact-tinder-card[[email protected]"[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

Solution

In this case, you have installed react-tinder-card for the project, however it seems to be buggy. Please try again as follows:

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

Conclusion

The above article gave a way to handle “Unable to resolve dependency tree“in Reactjs. Hope it helps you to solve your problem. If you have any problems, please contact us immediately. Thanks for reading!

Scroll to Top