javascript - Override npm package dependency - Stack Overflow

I read this: How do I override nested NPM dependency versions?

Unfortunately, it does not solve my problem.

I am trying to change a package from using a specific dependency to use another version of that dependency.

Is it built into a package what version of a dependency it should use, or is it possible to change it?

In my case specifically, I am trying to change css-loader's default dependency on [email protected] (latest) to instead be dependent on [email protected] (next).

From the second answer in the above link, user trickpatty notes that:

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

Including [email protected] in package.json's devDependencies does nothing to css-loader. It still uses the other (default) version of cssnano.

I read this: How do I override nested NPM dependency versions?

Unfortunately, it does not solve my problem.

I am trying to change a package from using a specific dependency to use another version of that dependency.

Is it built into a package what version of a dependency it should use, or is it possible to change it?

In my case specifically, I am trying to change css-loader's default dependency on [email protected] (latest) to instead be dependent on [email protected] (next).

From the second answer in the above link, user trickpatty notes that:

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

Including [email protected] in package.json's devDependencies does nothing to css-loader. It still uses the other (default) version of cssnano.

• javascript
• npm
• webpack
• package.json

Share Improve this question Follow edited May 30, 2018 at 0:59 Magnus asked May 22, 2018 at 18:18 MagnusMagnus 7,8211414 gold badges6565 silver badges101101 bronze badges 11

• 1 "Is it built into a package what version of a dependency it should use" <- yes. "is it possible to change it" <- also yes – Phil Commented May 30, 2018 at 1:02
• 1 @Phil If you run npm list cssnano you will see that there are two versions of cssnano installed, but that css-loader indeed still is dependent on the lower version (it shows as a "subfolder") – Magnus Commented May 30, 2018 at 1:33
• 1 @Phil "Given NPM's flat directory structure" - um, NPM famously has a highly nested directory structure, with multiple versions of every package able to be installed. Are you thinking of something else? – OrangeDog Commented Dec 3, 2019 at 12:56
• 1 @Magnus Phil is completely wrong. Each package uses its nested dependencies first – OrangeDog Commented Dec 3, 2019 at 12:57
• 1 @StopHarmingMonica I'm just going by what I thought I saw at the time. I could have sworn everything was at the top level of node_modules. I'm also quite happy to be wrong here. Glad I didn't provide an answer then :). Edit: pretty sure this is what I was seeing ~ npm.github.io/how-npm-works-docs/npm3/how-npm3-works.html, obviously I got confused – Phil Commented Dec 3, 2019 at 23:45

 |  Show 6 more comments

5 Answers 5

Sorted by: Reset to default 2

NPM 8 introduced "overrides" which allows you to override specific transitive dependencies of your direct dependency. For your usecase, you would declare something like below in your package.json.

{
  "overrides": {
    "css-loader": {
      "cssnano": "4.0.0-rc.2"
    }
  }
}

More details @ https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

There are several alternatives:

• If you can use different package manager, yarn has an option to achieve it by adding to the package.json:

"resolutions": {
    "package-a": "2.0.0"
}

• If you can use latest Node LTS and NPM 8: https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides

• Otherwise, you can use some tool like https://github.com/mislavlukach/flatten-dependencies that runs on postinstall script to fix your problem of different nested dependencies versions. You will need to install that version as dependency in your project.

EDIT: Found another alternative: https://www.npmjs.com/package/npm-force-resolutions

The following in your package.json can help you here. How it works is that it overrides all the versions of cssnano that css-loader requests with the version you've specified instead.

See the docs

"overrides": {
  "css-loader": {
     "cssnano": "1.2.3"
   }
}

In package.json you can add resolutions and give the path of dependency which was used. This is example from my project:

{
  "resolutions": {
    "helmet/helmet-csp": "2.9.1",
    "jest/**/handlebars": "4.5.3"
  }
}

This thread is a bit old and maybe already resolved, but maybe there is someone with the same question.

In my opinion, you should not change the dependency versions of your dependencies. Each project is developed, tested, and published considering their declared dependency versions. You could break or change the behavior of a package changing its dependencies externally.

Instead, think in making a fork of the project (css-loader), change the dependency version, test by yourself, and do use your fork. You can also open a pull request to the project maintainer (if you think the change will benefit the community) or publish your version (respecting the licensing policy).