How to manage multiple versions of the same NPM dependency?

Question

Situation

I've written a bunch of D3.js charts using the latest version of D3 (4.9.1).

However I also need to include the occasional C3.js chart in my app, problem is- C3 requires D3 v3.5.0.

What I've considered so far

Forking C3 to update it to the latest version of D3 (it's not really feasible though)
Using a different package manager, such as Yarn
Just forgetting about C3.... (don't want to do this, as it will involve a lot of re-work!)
Specifying a URL of an older version in the bower.json. However, I still was not able to reference to just that version for C3, and the latest for everything else.
```
 "d3": "^4.9.1",
 "d3-3.5.0": "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"
```

Question

Is it possible to manage multiple versions of the same dependency, cleanly? And if not, what would be a sensible work-around?

I think this is what you are looking for: https://stackoverflow.com/questions/16156445/multiple-versions-of-a-script-on-the-same-page-d3-js — Nick Cordova, Jul 01 '17 at 11:05
The workaround is to use NPM and build tool instead of Bower. C3 may have its own version of D3. It's not clear if you use Angular 4 or AngularJS. In the first case you already have Webpack, in the second `angular` tag is wrong, The tag is unnecessary here any way. — Estus Flask, Jul 01 '17 at 11:10

score 2 · Accepted Answer · answered Apr 25 '22 at 20:12

TLDR

Aliased versions of a dependency can be created with both NPM or Yarn using:
npm install <package_name_alias>@npm:<package_name>

Intro

Having multiple versions of the same dependency is really not ideal if it can be helped. But if, for example you're migrating to the latest version of a given package, while continuing to support legacy features in the interim, then it may be necessary.

Ensure you're using a recent version of NPM (at least v6.9.0 when support for this was added).

Install

So, to for example install both Vue 2, and the latest Vue 3 with NPN package aliases, we would do:

npm i vue
npm i vue-legacy@npm:vue@2.6.14

Or, with Yarn:

yarn add vue
yarn add vue-legacy@npm:vue@2.6.14

Import

Then, when it comes time to use the dependency,

import Vue from 'vue'; // Will use the latest version
import Vue from 'vue-legacy'; // Will use V 2.6.14

Package.json

In the package.json, this will look like:

"dependencies": {
  "vue": "^3.2.33",
  "vue-legacy": "npm:vue@^2.6.14"
}

You can also add this into your package.json manually, remove the lock file, and run npm install / yarn to fetch

Alternate Sources

You can also install packages directly from GitHub using this method. Useful to get a specific version, even if not yet published to NPM, or if you wish to use your own fork of the project.

npm install package-name@github:username/repository