608

I would like to use the grunt-contrib-jasmine NPM package. It has various dependencies. Part of the dependency graph looks like this:

─┬ grunt-contrib-jasmine@0.4.1
 │ ├─┬ grunt-lib-phantomjs@0.2.0
 │ │ ├─┬ phantomjs@1.8.2-2

Unfortunately, there's a bug in this version phantomjs which prevents it from installing correctly on Mac OS X. This is fixed in the latest version.

How can I get grunt-lib-phantomjs to use a newer version of phantomjs?

Some additional context:

Community
  • 1
  • 1
georgebrock
  • 28,393
  • 13
  • 77
  • 72

11 Answers11

292

As of npm cli v8.3.0 (2021-12-09) this can be solved using the overrides field of package.json. As described in StriplingWarrior's answer

For example, the project has typescript version 4.6.2 as direct development dependency and awesome-typescript-loader that uses old version 2.7 of typescript. Here is how you can tell npm to use version 4.6.2 of typescript for awesome-typescript-loader:

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": ...
  "dependencies": ...
  "devDependencies": {
    "typescript": "~4.6.2",
    "awesome-typescript-loader": "^5.2.1",
    ...
  },
  "overrides": {
    "awesome-typescript-loader": {
      "typescript": "$typescript"
    }
  }
}

If you don't use typescript as direct development dependency, then you have to write 4.6.2 instead of $typescript in overrides section:

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": ...
  "dependencies": ...
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    ...
  },
  "overrides": {
    "awesome-typescript-loader": {
      "typescript": "~4.6.2"
    }
  }
}

For using the latest version of dependency:

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": ...
  "dependencies": ...
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    ...
  },
  "overrides": {
    "awesome-typescript-loader": {
      "typescript": "latest"
    }
  }
}

Same overrides can be used for both dependencies and devDependencies.

If you're using npm version >5 but <8.3.0: edit your package-lock.json: remove the library from "requires" section and add it under "dependencies".

For example, you want deglob package to use glob package version 3.2.11 instead of its current one. You open package-lock.json and see:

"deglob": {
  "version": "2.1.0",
  "resolved": "https://registry.npmjs.org/deglob/-/deglob-2.1.0.tgz",
  "integrity": "sha1-TUSr4W7zLHebSXK9FBqAMlApoUo=",
  "requires": {
    "find-root": "1.1.0",
    "glob": "7.1.2",
    "ignore": "3.3.5",
    "pkg-config": "1.1.1",
    "run-parallel": "1.1.6",
    "uniq": "1.0.1"
  }
},

Remove "glob": "7.1.2", from "requires", add "dependencies" with proper version:

"deglob": {
  "version": "2.1.0",
  "resolved": "https://registry.npmjs.org/deglob/-/deglob-2.1.0.tgz",
  "integrity": "sha1-TUSr4W7zLHebSXK9FBqAMlApoUo=",
  "requires": {
    "find-root": "1.1.0",
    "ignore": "3.3.5",
    "pkg-config": "1.1.1",
    "run-parallel": "1.1.6",
    "uniq": "1.0.1"
  },
  "dependencies": {
    "glob": {
      "version": "3.2.11"
    }
  }
},

Now remove your node_modules folder, run npm ci (or npm install for old version of node/npm) and it will add missing parts to the "dependencies" section.

Viraj Singh
  • 1,951
  • 1
  • 17
  • 27
izogfif
  • 6,000
  • 2
  • 35
  • 25
  • 8
    This is nice, as long as `npm install` runs one time. In my case the edits are necessary as the nested dep is causing a fail. – ppasler Mar 01 '18 at 09:09
  • 130
    this will be removed anytime you run `npm i` instead of editing your package-lock.json and adding the child dependency to "dependencies" there, add the child dependency to your package.json "dependencies" section – trickpatty Mar 01 '18 at 16:18
  • Better yet, add it to your `devDependencies`, since you aren't really using that module on your code. – aviggiano Apr 30 '18 at 15:54
  • 22
    I've created a library that does exactly that for you automatically: https://github.com/rogeriochaves/npm-force-resolutions – Rogerio Chaves May 13 '18 at 16:23
  • 1
    @trickpatty I tried to add the new version (in my case cssnano/@next) to devDependencies, but my the package I want to change the dependency for (in my case css-loader), still uses cssnano/@latest. Could you please elaborate on how to force it to use another /@next instead of /@latest? Thank you. – Magnus May 22 '18 at 18:07
  • @Magnus Does overriding dependencies via `package-lock.json` work in your case? – izogfif May 23 '18 at 12:16
  • 3
    This doesn't work for me. I'm still getting the unwanted version of the child dependency. – FeeFiFoFum Jun 22 '18 at 03:55
  • @FeeFiFoFum please provide information about your Node version (it works for me on Node 8.4.0) and check if the dependency is duplicated somewhere (e.g. if package A requires version 1 of package B, and package C requires version 1 of package B, and you want to override version of B, you must override it for both A and C). – izogfif Jun 22 '18 at 15:45
  • What is the workaround for `npm install` undoing this? – 2rs2ts Jul 24 '18 at 04:00
  • 1
    @2rs2ts The last paragraph says that `npm install` should add missing dependencies, not ignore all your changes. Please make sure this works: remove `package-lock.json`, run `npm install`, edit `package-lock.json` the way it's described in the answer, then delete `node_modules` folder and run `npm install` once again. Will it work for you? – izogfif Jul 24 '18 at 13:19
  • 19
    It works but then if I run `npm install` again then all the changes to `package-lock.json` get reverted and I get the bad version of the dep back. – 2rs2ts Jul 24 '18 at 21:00
  • 22
    I run `npm ci` and this does not touch the `package-lock.json` – sschoof Dec 21 '18 at 10:07
  • 3
    how do i specify a git repo instead of version? – Daniel Lizik Feb 21 '20 at 09:38
  • 2
    @DanielLizik E.g., "dependencies": { "graphql-relay": { "version": "0.6.0", "resolved": "git@github.com:LMBernardo/graphql-relay-js.git#6dbd6f3cb0fa901620a85c16c8522d240f4315b4" } } – Layne Bernardo Apr 25 '21 at 05:28
286

You can use npm shrinkwrap functionality, in order to override any dependency or sub-dependency.

I've just done this in a grunt project of ours. We needed a newer version of connect, since 2.7.3. was causing trouble for us. So I created a file named npm-shrinkwrap.json:

{
  "dependencies": {
    "grunt-contrib-connect": {
      "version": "0.3.0",
      "from": "grunt-contrib-connect@0.3.0",
      "dependencies": {
        "connect": {
          "version": "2.8.1",
          "from": "connect@~2.7.3"
        }
      }
    }
  }
}

npm should automatically pick it up while doing the install for the project.

(See: https://nodejs.org/en/blog/npm/managing-node-js-dependencies-with-shrinkwrap/)

Heath Borders
  • 30,998
  • 16
  • 147
  • 256
tuxpiper
  • 3,329
  • 2
  • 17
  • 6
  • Nice and simple! But you don't really need `from`. Why do you add it? – Domi Mar 17 '15 at 05:24
  • 10
    When I do this, only the `grunt-contrib-connect` dependency and its children are installed. All my other dependencies in package.json are not installed. – iDVB Apr 23 '15 at 00:40
  • 7
    I had the same issue as @iDVB. I ended up editing the `node_modules` directory so that the full shrinkwrap dependency dump was exactly what I wanted, not just overrides. But still a kind of painful solution. – Kobold Aug 05 '15 at 15:06
  • 2
    @Domi this file is created by running npm shrinkwrap, the entries are not added by hand – glasspill Dec 01 '15 at 12:57
  • why at one line it says `grunt-contrib-connect@0.3.0` and then on another line only `connect` --> `connect@~2.7.3` – Jas Jun 15 '16 at 15:52
  • Thank you! `npm shrinkwrap` wouldn't run because of "unmet peer dependencies" until I manually created a npm-shrinkwrap.json file per your template here and overrode "peerDependencies". Once I did that I could remove the .json file and then `npm shrinkwrap` ran fine. Yay! – Bob Kocisko Aug 08 '16 at 21:53
  • 1
    Agreed, its a pain to generate a full shrinkwrap file and edit only the sub or sub-sub dependencies with `npm 2.x (node4)` but with `npm 3.x (node5)` we can be minimalistic and only create a shrinkwrap file to address exactly what needs to be overridden. https://github.com/npm/npm/issues/7108 – pulkitsinghal Aug 13 '16 at 15:05
  • 18
    Unfortunately, as is mentioned in that bug, with npm4, the minimalistic approach no longer works. (When deleting `node_modules`, running an install with a minimal shrinkwrap seems to leave `devDependencies` intact though ignoring `dependencies`, but running another install removes the non-explicit items, so for now it is important to run `npm shrinkwrap` to get a full file, modify the portion in question, and then run `npm install` again) – Brett Zamir Feb 21 '17 at 03:34
  • use `npm shrinkwrap` to generate it, but be aware that this will make **npm-shrinkwrap.json** take precedence over any other existing or future **package-lock.json** files – Consta Gorgan Nov 29 '18 at 14:29
  • 17
    npm 6.4 will just overwrite the shrinkwrap file and use the outdated dependencies – ShadSterling Feb 01 '19 at 17:03
  • If you already have a package-lock.json (and you almost definitely do) then the shrinkwrap file you create will be incorporated into your package-lock.json the next time you `install` because you cannot have both. – lance.dolan Mar 08 '19 at 19:46
  • This way you're basically ditching your `package-lock.json`. That is, your packages are going to be updated in accordance with the `package.json` file. And this is a hack, your override will vanish the next time `npm` has to [change something](https://gist.github.com/x-yuri/1513e1fdb288cc9f683d7e672a748a57#npm-shrinkwrapjson-solution). – x-yuri Feb 09 '20 at 03:09
  • using npm 6.13.1. I have a similar scenario. My project calls "A" that depends on "B" that depends on "C, 1.0.0" and I want to force B to use "C, 2.0.0". What do I have to do? – Eikistein Mar 19 '20 at 18:52
253

As of npm v8.3 (released with Node.js 16), the correct way to deal with this is via the overrides section of your package.json file.

If you need to make specific changes to dependencies of your dependencies, for example replacing the version of a dependency with a known security issue, replacing an existing dependency with a fork, or making sure that the same version of a package is used everywhere, then you may add an override.

Overrides provide a way to replace a package in your dependency tree with another version, or another package entirely. These changes can be scoped as specific or as vague as desired.

To make sure the package foo is always installed as version 1.0.0 no matter what version your dependencies rely on:

{
  "overrides": {
    "foo": "1.0.0"
  }
}

There are a variety of other, more nuanced configurations allowing you to only override a package when it's a dependency of a particular package hierarchy. For more details, check out https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides

Boris Verkhovskiy
  • 14,854
  • 11
  • 100
  • 103
StriplingWarrior
  • 151,543
  • 27
  • 246
  • 315
  • 19
    @georgebrock please consider marking this as the correct answer -- the ecosystem has changed since you asked the question and this is a high ranking Google result – jcollum Jan 14 '22 at 19:43
  • 13
    Consider adding `"engines": { "npm": ">=8.3.0" }` to your package.json to indicate that a new npm version is required – leumasme Mar 04 '22 at 21:44
  • 4
    This tripped me up: if you use a monorepo with workspaces, you need to define overrides in the root package, not in the nested projects with the actual dependencies. – Vsevolod Golovanov Apr 13 '22 at 12:57
  • I added this to package.json but not work with yarn install. I use yarn. But I added it that maybe anyone else possibly can use npm. I hope this is also works with npm. – zenon May 02 '22 at 16:01
  • 2
    Great advice from @leumasme! We expanded it with `engine-strict=true` inside `.npmrc` to not only get a warning, since the dependency that needs to be overriding breaks a lot for us. – pavleprica Jun 06 '22 at 11:16
  • 2
    Note that there are issues with the implementation of the overrides property and it's reported to only work with the first `npm install` command: https://github.com/npm/cli/issues/5443 – Samuli Asmala Oct 18 '22 at 04:40
  • Thanks for this answer. I wish that `npm audit force` also made fixes by using overrides - right now it just updates the package-lock.json, which suffers from all the same problems brought up in the comments to Viraj Singh's answer. – adevine Jan 24 '23 at 22:26
101

The only solution that worked for me (node 12.x, npm 6.x) was using npm-force-resolutions developed by @Rogerio Chaves.

First, install it by:

npm install npm-force-resolutions --save-dev

You can add --ignore-scripts if some broken transitive dependency scripts are blocking you from installing anything.

Then in package.json define what dependency should be overridden (you must set exact version number):

"resolutions": {
  "your-dependency-name": "1.23.4"
}

and in "scripts" section add new preinstall entry:

"preinstall": "npm-force-resolutions",

Now, npm install will apply changes and force your-dependency-name to be at version 1.23.4 for all dependencies.

MiniGod
  • 3,683
  • 1
  • 26
  • 27
user11153
  • 8,536
  • 5
  • 47
  • 50
  • 2
    hint: use `--save-dev` flag for `npm install` – TmTron Aug 20 '20 at 09:02
  • 1
    this would not work if one wants to upgrade corresponding dependency only for one particular 3rd party dependency – sandeep chauhan Mar 01 '21 at 05:33
  • Note: this works only when you have package-lock.json enabled, which some devs might not have due to its inherent problems. – Mike Lischke Apr 22 '21 at 07:46
  • 6
    Is there any built-in solution in latest versions of NPM as per year 2021? I would not like to depend on a third party library for this kind of things - manipulating dependency tree. – Dani P. Jun 24 '21 at 22:44
  • 2
    @DaniP. npm is poor's man dependency manager, so I doubt it – user11153 Jun 25 '21 at 07:54
  • 1
    For me the preinstall command broke in Circle CI, so i used this one instead: ```"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"``` See https://stackoverflow.com/a/67446313/6627882 – Dabrule Sep 02 '21 at 09:47
  • 1
    @keemor worth mentioning that's completely different library with similar name and purpose – user11153 Sep 28 '21 at 13:54
66

For those using yarn.

I tried using npm shrinkwrap until I discovered the yarn cli ignored my npm-shrinkwrap.json file.

Yarn has https://yarnpkg.com/lang/en/docs/selective-version-resolutions/ for this. Neat.

Check out this answer too: https://stackoverflow.com/a/41082766/3051080

Gus
  • 6,545
  • 4
  • 36
  • 39
10

Nested replacement with an entirely different package

Most of the strategies outlined in the other answers here work well if you are just interested in overriding the package's version number, but in our case, we needed to find a way to override a nested npm sub-dependency with a different package altogether. For details on why you would ever want to do this, please refer to the following question:

How to override a nested npm sub-dependency with a different package altogether (not just different package version number)?

Specify the tarball directly

For nested replacement of a package with an entirely different package using the npm-force-resolutions strategy that others have mentioned, you just need to provide a link to the tarball where you would normally specify the overriding version number.

As an example, for the case of replacing the vulnerable package, ansi-html, with the fixed fork of this package, ansi-html-community, your resolutions section of package.json should look like this:

"resolutions": {
    "ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz"
}

To find the link to the tarball, use the following command, modifying your registry as necessary:

npm view ansi-html-community dist.tarball --registry=https://registry.npmjs.org/

Also, note that for npm-force-resolutions to work when you run npm install, you will need a preinstall entry under the scripts section of package.json:

  "scripts": {
    "preinstall": "npx npm-force-resolutions"
  }
Justin Dehorty
  • 1,383
  • 1
  • 15
  • 26
  • 3
    Thank you, this was really useful. I thought replacing a package would have been possible by overriding using a reference e.g. `"bar": "$foo"` as documented in the last example [here](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) but I couldn't get it to work. But your solution did the trick and I would give an extra point for the details. – user115014 Jan 18 '22 at 14:44
  • npm uses `"overrides"` instead of `"resolutions"` – Dror Bar Apr 09 '23 at 09:19
6

Based on the rest of the answers, I provide the same solution, but I display the package.json, as I struggled a little bit on where to place the override and how.

{
  "name": "my-app",
  "version": "snapshot",
  "scripts": {
    "ng": "ng",
    "build-dev": "ng build --configuration development",
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~14.2.9",
    "@angular/common": "~14.2.9"
    ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.8",
    ....
  },
  "overrides": {  
    "loader-utils@>2.0.0 <3": "2.0.4",
    "loader-utils@>3.0.0 <4": "3.2.1"
  }
}

For November 2022 "loader-utils" security vulnerability, it was requested to

  • use the version 2.0.4, if you are in the 2.X
  • use the version 3.2.1, if you are in the 3.X

And to verify

  • add the package.json the override tag
  • delete the package-lock.json
  • run "npm install"
  • run "npm audit"
Andreas Panagiotidis
  • 2,763
  • 35
  • 32
3

@user11153 's answer worked for me locally, but when trying to do a clean install (aka deleting node_modules), I would get:

npm-force-resolutions: command not found

I had to update the preinstall script to be:

"preinstall": "npm i npm-force-resolutions && npm-force-resolutions"

Which ensures that npm-force-resolutions package is installed before attempting to run it.

That being said, if you're able to use yarn instead, I would do that and then use @Gus 's answer.

Emilio Venegas
  • 546
  • 5
  • 22
  • 3
    I used ```"preinstall": "npx force-resolutions"``` as suggested here https://github.com/rogeriochaves/npm-force-resolutions/issues/10#issuecomment-885458937 – keemor Sep 28 '21 at 13:53
  • There's also a more speedier route via a bit of `bash`ery: https://stackoverflow.com/a/68095189/132735 – Dr1Ku Nov 12 '21 at 09:52
  • There is no answer by "Gus". Could you instead explicitly link to the answer you refer to when writing *and then use @Gus 's answer*? – Henke Mar 23 '23 at 13:18
2

I had an issue where one of the nested dependency had an npm audit vulnerability, but I still wanted to maintain the parent dependency version. the npm shrinkwrap solution didn't work for me, so what I did to override the nested dependency version:

  1. Remove the nested dependency under the 'requires' section in package-lock.json
  2. Add the updated dependency under DevDependencies in package.json, so that modules that require it will still be able to access it.
  3. npm i
Ethan Yang
  • 31
  • 4
2

I was about to go down the npm-force-resolutions route but it seems that simply including the dependency in my own package.json fixed the problem for me.

I believe this worked in my case because the original dependency allows for patch versions of the dependency in question that I wanted to update. Thus by manually including a newer version it still fulfilled the dependency of the original dependency and will use the one I've manually added.

Example

Problem

I need to update plyr to version 3.6.9 from 3.6.8

Mine

package.json

{
  "dependencies": {
    "react-plyr": "^3.2.0"
  }
}

React Plyr

package.json

{
  "dependencies": {
    "plyr": "^3.6.8"
  }
}

Notice for the plyr dependency it starts with ^ this means it can accept any minor patches. You can learn more about that here:

https://docs.npmjs.com/about-semantic-versioning#using-semantic-versioning-to-specify-update-types-your-package-can-accept

Updating Mine

This updates the plyr dependency from my package.json.

package.json

{
  "dependencies": {
    "plyr": "^3.6.9",
    "react-plyr": "^3.2.0"
  }
}
CTS_AE
  • 12,987
  • 8
  • 62
  • 63
-6

Run this first

npm i -D @types/eslint@8.4.3

it will solve the issue

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
AnushangaPavith
  • 1
  • 2