How to Install Multiple Versions of the Same Package in NPM

jmaicaaan

JM Santos

Posted on October 30, 2020

How to Install Multiple Versions of the Same Package in NPM

Photo by Paul Teysen on Unsplash

Have you encountered when you are working on a project and you want to upgrade a dependency but you can’t do because you will have to migrate a lot of code?

Let’s say I have this as my package.json and I want to upgrade the package formik to the latest version. The latest version is standing at the version 2.2.0 which is a little bit far from our current version.

We want to upgrade formik to the latest version so we can take advantage of the new features and other new improvements.

But for some reason, we can’t just update it directly because our current version and the latest version contains some breaking changes. Yes, there is a migration step illustrated but we can’t just migrate all the places where it is being used due to time constraints and priorities.

And the fact that it takes a lot of hard work to make sure everything is working as expected. We don’t want to break existing parts just because we missed some migration steps.

Is it possible to install the latest version in isolation so it will not affect other parts of our code?

Would it be great if we can install multiple versions of formik and we can gradually migrate each part of our code instead of one big migration?

Yes oh yes. But before that, let’s make sure we are on the correct version of Node.js and NPM. Let’s get started with that!

📝 System Requirements

In order for us to successfully work with it, let’s make sure our NPM version is 6.9.0 or above because that is the version where it started supporting it based on the release notes.

$ npm -v
Enter fullscreen mode Exit fullscreen mode

NPM comes with Node.js so you have to make sure your Node.js version is 10.16.0 based on the release notes.

$ node -v
Enter fullscreen mode Exit fullscreen mode

You can use this Node package manager (nvm) to handle different versions of Node.js without installing the bundle.

To sum it up:

NPM version: 6.9.0 or above ✅

Node version: 10.16.0 or above ✅

⚙ ️Install Them All

Now that we already have the correct version, let’s see our command to execute.

The NPM command we are going to use is called package aliases and here is the command:

npm i <package_name_alias>@npm:<package_name>
Enter fullscreen mode Exit fullscreen mode

Let’s replace those placeholders with our real values

npm i formik-latest@npm:formik
Enter fullscreen mode Exit fullscreen mode

This will install the latest version available on NPM.

The latest version of formik is 2.2.0 but what if you want to get a specific version? Let’s say we want the version 2.0.0 exactly. Add the version like you normally do. An example of that would be like this:

npm i formik-latest@npm:formik@2.0.0
Enter fullscreen mode Exit fullscreen mode

This is now how our package.json looks like after installing the latest version of formik.

The usage of that would be something like:

// file1.js

import { Formik } from 'formik';
Enter fullscreen mode Exit fullscreen mode

Then if you want to use the latest one, just use the alias name in the import

// file2.js

import { Formik } from 'formik-latest';
Enter fullscreen mode Exit fullscreen mode

I have created a codesandbox, however, it is not loading correctly not sure what’s wrong with that. But, locally it is working (you can copy the package.json above and install it). Codesandbox started supporting that as of late in May 2020. You can read it here https://github.com/codesandbox/codesandbox-client/pull/3730.

🤖 Bringing It All Together

Installing with alias is a great way to do especially if you have a legacy project which is one of the best use cases for it since you can upgrade the packages gradually.

You don’t have to worry about regressions or breaking other parts of the system easily.

You can try the latest version of your favorite library in isolation on your new task that you are working on without worries.

But on the other side, we shouldn’t do a lot of package aliases instead we should be responsible for migrating other parts little by little because it will pile up. And when it comes to the point you have a lot of package aliases, it might slow down the performance of installing your project (this can result in longer hours in the pipeline) and a bigger bundle of the application.

Did I miss something? Let me know in the comment section and let’s work on that.

Thank you for reading. I hope this will help you on your journey! ❤️


💖 💪 🙅 🚩
jmaicaaan
JM Santos

Posted on October 30, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related