Fix the upstream dependency conflict installing NPM packages

Question

I am trying to npm install vue-mapbox mapbox-gl, and I'm getting a dependency tree error.

I'm running Nuxt.js SSR with Vuetify and haven't installed anything related to Mapbox prior to running this install and am getting this error.

38 error code ERESOLVE
39 error ERESOLVE unable to resolve dependency tree
40 error
41 error While resolving: "example"@"1.0.0"
41 error Found: mapbox-gl@"1.13.0"
41 error node_modules/mapbox-gl
41 error   mapbox-gl@"^1.13.0" from the root project
41 error
41 error Could not resolve dependency:
41 error peer mapbox-gl@"^0.53.0" from vue-mapbox@"0.4.1"
41 error node_modules/vue-mapbox
41 error   vue-mapbox@"*" 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 /Users/user/.npm/eresolve-report.txt for a full report.
42 verbose exit 1

What's the right way to go about fixing this upstream dependency conflict?

Answer 1

It looks like it's a problem with peer dependencies in the latest version of npm (v7) which is still a beta version.

Try with npm install --legacy-peer-deps. For detailed information check the blog post npm v7 Series - Beta Release! And: SemVer-Major Changes in npm v7.

Answer 2

Problem explanation:

Your dependency mexample requires mmapbox-gl v1.13.0 and mvue-mapbox requires mmapbox-gl v0.53.0.

NPM doesn't know which version to install, so it gives a warning. You can bypass the errors using -- force or --legacy-peer-deps, but you are ignoring an error, and making unexpected results.

Fix the error (Production best practices):

1. Probably one of your packages is outdated. Upgrading packages and fixing upgrade errors might fix the dependency conflict.

2. Overriding a dependency manually to avoid the warning and error. You are setting the version to a specific one that you know that works. Usually the newer version.

Example solution with override. Your package.json file will look like this:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "mexample": "^1.2.0",
    "vue-mapbox": "*"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "overrides": {
    "mmapbox-gl": "1.13.0"
  }
}

Bypass the error (quick and dirty solution):

1. --legacy-peer-deps completely ignores all peerDependencies using the newest version without pinning on file package-lock.json
2. --force forces the use of the newest, pinning all the versions on package-lock.json

Extra: You shouldn't use "*" as a version, because it might update major and break dependencies.

Answer 3

Use --legacy-peer-deps after npm install. For example, if you want to install Radium, use:

npm install --legacy-peer-deps --save radium

Answer 4

There are two ways:

1. use npm install --legacy-peer-deps to install, and if this doesn't work use

2. the force method. Add --force next to npm install: npm install --force

Answer 5

You can follow these commands

First type:

npm config set legacy-peer-deps true

Then type:

npx create-react-app my-app

Answer 6

I tried multiple ways, but nothing was working for me. At last I tried this and it worked:

npm config set legacy-peer-deps true

Run this in the project folder and then try to install any package. It might work for you as well.

Answer 7

Until npm version 7.19.1, it still had the same issue. After upgrading to version 7.20.3, use command npm install -g npm@latest and npm audit fix. All packages will be fixed without error.

Answer 8

I was stuck on this issue for long which also makes error from other commands which calls for some install commands that was breaking.

The only solution that works (maybe suppresses the error) is

npm config set legacy-peer-deps true

This will set the configuration of legacy-peer-deps to true

Answer 9

To solve it, fix the upstream dependency conflict installing NPM packages error

Method 1. Just use --legacy-peer-deps after npm install.

For example, if you want to install Axios, use

npm install --legacy-peer-deps --save axios.

Method 2. Updating npm and 'audit fix'

npm I -g npm@latest
npm audit fix --force

Method 3. Using --force to install packages

npm install axios --force

Answer 10

To resolve npm dependencies and conflicts with npm packages, use npm-check-updates.

Answer 11

Almost all answers here suggest using force or legacy-peer-deps. Though this will technically work, please note that this is not recommended by NPM if you can avoid it anymore (source). Some folks may not have a choice, but I was able to resolve my dependency conflicts by deleting node-modules and package-lock.json then manually updating packages to their latest version one at a time until it stopped complaining (packages mentioned in the error messages after running npm i. Not a great or clean solution, but at least my packages are up-to-date and I'm not ignoring errors or using legacy solutions.

Answer 12

• delete the package-lock.json file
• modify the package.json file, updating the version as indicated by the peer dependency

Add a tilde or caret for allowing install latest version and resolving dependency issues, for example :

~1.0.2 means to install version 1.0.2 or the latest patch version such as 1.0.4.

^1.0.2 means to install version 1.0.2 or the latest minor or patch version such as 1.1.0.

• run npm install or npm udpate

Answer 13

A lot of upvotes for using --legacy-peer-deps, but if --force works, I would recommend using that since it still pins many dependency versions while --legacy-peer-deps ignores peer dependencies entirely. See the example below:

npm: When to use --force and --legacy-peer-deps

I started getting this error on Azure DevOps a few days ago. I initially thought it was a glitch on the Azure side, but since it continued, we started looking into it a bit more.

It turns out the agent we are using, windows-2022, was updated a few days ago:

Updating readme file for win22 version 20220607.3 (#5713)

Node and NPM now match the latest Node.js LTS version: 16.15.1 (includes npm 8.11.0)

Downloads

You can view all agents-included software on Microsoft-hosted agents, Software.

After reading on Microsoft Visual Studio Developer Community, they recommend downgrading Node.js using Node.js Tool Installer task like this:

- task: NodeTool@0
  inputs:
    versionSpec: '16.14.2'

Node.js Tool Installer task

npm install fails in Azure DevOps Hosted Agent

However, we decided that we do not want to downgrade Node.js, so the first step was matching Node.js locally with LTS version 16.15.1 and npm 8.11.0.

When running npm ci, we then got the same error locally.

We tried npm ci --force and we then got this error:

npm ci can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with npm install before continuing.

npm install gave the same error even after node_modules was manually removed, but npm install --force worked, and it generated a new package-lock.json file.

npm ci still failed with the same error, but running npm ci --force worked. We decided to update Azure DevOps .yml to include --force and checked in the new package-lock.json file. After doing this, everything worked like before and we could now update our packages one by one.

Answer 14

Nothing here worked for me.

After struggling with this issue for so long, I found a solution that worked. Apparently I had some packages installed globally.

Listed them with:

npm list -g --depth=0

Then removed the unwanted packages with:

npm uninstall -g <package-name>

Finally I got the problem fixed

Answer 15

I resolved this by adding

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '12.x'