How to Update a Package Using 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.

If you want to discover more, here is another article about how to remove a package using NPM.

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. 📦🚀

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒