How to Update a Package With NPM

A short tutorial about how to update one package with NPM.

Nowadays, most JavaScript projects use dependencies. They can be delivered through different package managers, but in this article, we'll focus on NPM.

As a computer, it's essential to keep your project dependencies up to date. It's needed to get the latest security fixes, bugs fixes, improvements, and features.

How to know if an NPM package is outdated

Before going further in the update process, you'll need to figure out if your NPM package is outdated or not.
To know about that, there are two possibilities:

• keep yourself updated about the package news and changelog (ex: read about a React major update)
• use the npm outdated command in your project root repository

Let's use the npm outdated command in the project of your choice. If there are packages to update, the output should look as below:

Package                          Current   Wanted    Latest    Location                      Depended by
react-i18next                    11.15.3   11.15.5   11.15.5   node_modules/react-i18next    my-repo
tailwindcss                      3.0.12    3.0.23    3.0.23    node_modules/tailwindcss      my-repo
[...]

If you don't see anything, good news! It means that your project is up to date.

How to update one package with NPM

Now that you know more about which package needs to be updated in your project. Let's pick one of them and update it.

Based on the list in the previous part, I'll pick tailwindcss because I noticed that the current version in my project is 3.0.12, but the wanted is the 3.0.23.

To do so, NPM is providing an update command that works as follows: npm update [package_name].

As an example, in my case, I would do:

$ npm update tailwindcss

Note: When running the npm update command, the package will update to the "Wanted" version (ref. output of npm outdated). This security is here to avoid breaking your code with major releases.

Update package to the latest version

This part will teach you to update your package to its latest version and major release. It's a typical case when you need one new feature available in the above version.

Let's imagine you have an output that looks like this:

Package                          Current   Wanted    Latest    Location                      Depended by
tailwindcss                      2.2.19    2.2.19    3.0.23    node_modules/tailwindcss      my-repo
[...]

As you can notice, the current version of tailwindcss is 2.2.19, but there is a major update 3.0.23.

To update the NPM package to the latest version, you must type npm install tailwindcss@latest.

Note: Doing a major NPM update may break your code due to significant changes in the corresponding library. I recommend you check your package website. They provide an upgrade guide or helpful information to update your code most of the time. For example, TailwindCSS provided an upgrade guide from V2 to V3.

Wrapping up and recommendation

I hope this article helped you to update one package of your project!

One last recommendation for your project health, don't forget to test your website and/or run your test suite if you have one. It's essential to check if everything is still working after a package update. 📦🚀

➡️ I regularly deliver content about web development, personal growth as a developer, and my journey as an aspiring digital nomad and remote software engineer. If you don't want to miss them, I invite you to follow me on Twitter. 🚀