How to force specific versions of transitive dependencies in NPM?

Other Questions NPM
1

I’m trying to work with the karma-jasmine-html-reporter package but I’m running into issues with its dependency chain. The structure looks something like this:

─┬ [email protected]
 │ ├─┬ [email protected]
 │ │ ├─┬ [email protected]

There’s a compatibility issue with the chrome-launcher version that’s causing problems on Windows systems. A newer release fixes this bug.

What’s the best way to make karma-runner use an updated version of chrome-launcher?

Here are some details about my situation:

  • The karma-jasmine-html-reporter package specifies "~2.1.0" for karma-runner, which then requires "~3.2.0" for chrome-launcher
  • I tried adding chrome-launcher directly to my project dependencies but it doesn’t work - both versions get installed and the package still uses the old one

Any suggestions on how to override this nested dependency version?

2

You can use npm’s overrides field in your package.json to enforce specific versions of transitive dependencies. This method is quite effective for addressing compatibility issues like the one you’re experiencing. Just add the following to your package.json:

{
“overrides”: {
“chrome-launcher”: “^3.3.0”
}
}

This configuration ensures that all dependencies across your project will use the specified version of chrome-launcher, overriding any conflicting version constraints from other packages. After making this change, remember to delete your node_modules and package-lock.json, then run npm install again. Note that you will need npm version 8.3.0 or higher for this to work. I’ve implemented this for similar compatibility problems on Windows with great success.

3

you could also try npm-shrinkwrap.json, though it’s a bit tricky. edit your package-lock.json to pin the chrome-launcher version, then run npm shrinkwrap to lock it. it’s hacky but works when overrides aren’t available.

4

You can also use npm’s resolutions field, but you’ll need to switch to Yarn as your package manager. If that works for you, just add this to your package.json:

{
  "resolutions": {
    "chrome-launcher": "^3.3.0"
  }
}

Or try the npm-force-resolutions package - it brings similar functionality to npm. Install it as a dev dependency and add a preinstall script to your package.json that runs npx npm-force-resolutions. I’ve found this really helpful for legacy projects that can’t easily migrate to newer npm versions. The main advantage is it works with older npm versions where the native overrides feature doesn’t exist yet.