ERESOLVE unable to resolve dependency tree when npm install runs in nodejs and netlify

npm install is a command to install dependencies of an application.

Sometimes, When you are running npm install, You will get dependency error npm ERR! ERESOLVE unable to resolve dependency tree. as seen below.

5:43:24 PM: Installing NPM modules using NPM version 7.11.1
5:43:33 PM: npm ERR! code ERESOLVE
5:43:33 PM: npm ERR! ERESOLVE unable to resolve dependency tree
5:43:33 PM: npm ERR!
5:43:33 PM: npm ERR! Found: compression-webpack-plugin@3.1.0
5:43:33 PM: npm ERR! node_modules/compression-webpack-plugin
5:43:33 PM: npm ERR!   compression-webpack-plugin@"9.0.1" from the root project
5:43:33 PM: npm ERR!
5:43:33 PM: npm ERR! Could not resolve dependency:
5:43:33 PM: npm ERR! compression-webpack-plugin@"9.0.1" from the root project
5:43:33 PM: npm ERR!
5:43:33 PM: npm ERR! Conflicting peer dependency: webpack@5.64.4
5:43:33 PM: npm ERR! node_modules/webpack
5:43:33 PM: npm ERR!   peer webpack@"^5.1.0" from compression-webpack-plugin@9.0.1
5:43:33 PM: npm ERR!   node_modules/compression-webpack-plugin
5:43:33 PM: npm ERR!     compression-webpack-plugin@"9.0.1" from the root project
5:43:33 PM: npm ERR!
5:43:33 PM: npm ERR! Fix the upstream dependency conflict, or retry
5:43:33 PM: npm ERR! this command with --force, or --legacy-peer-deps
5:43:33 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
5:43:33 PM: npm ERR!
5:43:33 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
5:43:33 PM: npm ERR! A complete log of this run can be found in:
5:43:33 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-11-26T12_13_33_353Z-debug.log
5:43:33 PM: Error during NPM install

This is an error-related dependency conflict version mismatch to direct and indirect dependency with incorrect and broken dependency.

As per the stack trace error above, You upgraded the webpack from 5.1.0 to 5.64.4 But did not upgrade indirect dependency compression-webpack-plugin 3.1.0 instead of 9.0.1

An application has webpack dependency trying to resolve from two places

• Direct dependency compression-webpack-plugin with 3.1.0 i.e upper version
• Indirect dependency compression-webpack-plugin@9.0.1 from webpack@5.64.4

This error occurs with any application type like angular, react,vuejs and gatsby. In that case, What is the solution for this?

Fix for Conflicting peer dependency in node.js

There are multiple ways to fix it

one way, download the node and npm version

Here are the steps

• Downgrade npm version to the previous version
• remove node_modules folder
• remove package-lock.json
• please do npm install one more time to do a fresh installation of the dependency

Here is a sequence of command you can do

rm -rf node_modules
rm package-lock.json
npm install

the second way, downgrade or upgrade dependency In the above example, either downgrade webpack dependency to 5.1.0 or upgrade compression-webpack-plugin to 9.0.1

Third way, Run npm install with –force or –legacy-peer-deps option to set peer dependencies to resolve automatically

please try one of the below commands to resolve dependency conflict

npm install --save --legacy-peer-deps
npm install  --legacy-peer-deps
npm install  --force

forth way,

Update .npmrc file with below configuration .npmrc file

legacy-peer-deps=true

The same can be configured with npm command using below

npm config set legacy-peer-deps true

Fix for netlify Dependency conflict version

This is an error you used to get during the build and deployment pipeline in the netlify environment.

There is no command line to set peerDependency in netlify.

To resolve this, Go to the application root directory Create .npmrc file

Add or update below configuration .npmrc file

legacy-peer-deps=true

Commit changes and deploy to the netlify environment.

It resolves an error and dependencies are solved successfully.

Conclusion

To Sum up, Learned Different ways to resolve dependency version conflict in nodejs applications and netlify environment.