Updating npm Dependencies

After setting up a project, we might be inclined to forget to ever touch our installed packages again. They don't suddenly stop working after all. However the point comes where we want to install yet another package that won't work unless we update an already installed package. We can directly use this opportunity to upgrade many or even all of our used packages with a simple command. Let's discuss why we should update our packages, how to update best and what to do after an update.

Why we should update our npm packages

There can be many reasons for updating our packages:

  • A new package that we want to use requires a higher version of a used package
  • We used one of the many vulnerability checking tools like Snyk or npm audit and they tell us, that current versions have vulnerabilities
  • A library released a new feature that we want to use in our project

But even if none of those reasons apply to us, we should still keep our dependencies up to date. This way, we won't run into the problem of updating over multiple major releases at the same time, which can cause lots of pain and effort because we have to adapt our code in too many places. By continuously taking smaller steps, the effort can be kept low and we can do it as part of day to day work so that we don't run into the problem of having to convince our product owner to prioritize a larger updating session in the backlog.

How to update our packages

Of course, we could just go through all of our dependencies in our package.json manually and check the corresponding npm page to check for newer versions, but there is a simpler way: Use interactive tools! These automatically scan your package.json, and check with the npm registry for updates to your used packages. They can even offer you a simple multiselect where you can select exactly the packages that you want to update. Depending on the package manager that you are using you can use one of the following tools:

Both of those will show you a UI like this:

No Component registered for type asset

Here you can also directly go to the documentation to see if any of the changes affect your usage in your project.

What to do after the update

In the best case scenario, you can run your extensive test suite containing unit tests and end to end tests that cover all aspects of your application. As long as these are green, you are good to go. However, realistically this is oftentimes not the case. Things you definitely should do is run a build of your application and (if you are using TypeScript) run the compiler to check for type errors after updates. If those turn out fine, you should still definitely restart your application (to make sure that updates to your build tools are also taken into account) and click around through the most important use cases to get a feeling if everything works. And then you directly go to your product owner to tell them that you should implement at least some end to end test for the critical parts so that you don't have to do as much manual work during updates.