How to patch npm packages

4 min read
Tags:

Intro

In this post, let’s take a look at ways to patch npm packages. This is useful for npm packages that consist of an error and/or typo that blocks development. This post walks through how to create a patch for any npm package. You can also check out our video on how to patch npm packages.

Environment

If you need to configure your environment to use Node, take a look at the Environment setup section from our code samples repository. Alternatively, you can check out this post on How to Send Emails with Nylas Node SDK to configure your environment to use Node. We will use Yarn so you can follow the steps to install Yarn.

Approaches for updating npm packages

When it comes to updating npm packages, we have three options:

Update locally

Updating the package locally is not a long-term solution. We end up overwriting the local updates when installing and/or adding new npm packages.

A local update cannot be distributed to team members since a local environment change cannot be commited to a remote repository (node_modules is usually added to .gitignore).

Create a fork

Pointing to a fork of an npm package is an improvement as you can share the changes with your team, however, you will need to ensure the fork is kept up to date with the original npm package.

So you become the owner of the npm package once you addressed the issue with the forked version. There is a better alternative.

Create a patch

Creating a patch allows you to apply a diff to the npm package every time it is installed. So you can continue to use the latest and greatest version of the npm package, and apply a patch anytime it is installed or deployed as part of your local and production environments.

Let’s go over the steps to patch an npm package next.

Steps to patch npm packages

For this post, we are going to use the yarn patch command to modify an npm package. Alternatively, you can take a look a look at patch-package.

The first thing we are going to do is call yarn patch on the npm package we want to update, let’s try updating the Nylas Node.js SDK npm package:

From the terminal output, keep in mind the step Once you are done run as it will contain the command to commit the updates as a patch. If you come across issues using yarn patch, consider setting up your repository to use yarn following the migration steps.

Next, let’s update the package in Visual Studio (VS) Code:

You can set up VS Code to run from the command line following these steps.

In our example, we are correcting a typo on the Calendar Event participants model, can you see the typo (hint ????)?

The typo is phony and should be replaced with phone. We created this arbitrary example just to show how to use the yarn patch command.

Note that you will have to modify the production code, and this can be hard to follow at times. For creating the patch, we need to use the command provided to us previously. Let’s create the patch:

Let’s check the updates in VS Code:

Here we can see the folder /.yarn/patches created that contains the updated patch that will run every time we install npm packages using yarn install. This is part of the updated packages.json file under resolutions:

So the patch consists of the line-by-line differences that will be applied every time the Nylas Node.js SDK npm package is installed.

Now we’ve explored how to create a patch for any npm package using the yarn patch command.

Build Time!

Take a look at the yarn patch command to learn more. Continue building with Nylas and learn more by visiting the documentation. Sign up here if you need to create a Nylas account for free!

Don’t miss the action, watch our LiveStream Coding with Nylas:

Related resources

How to create an appointment scheduler in your React app

Learn how to create an appointment scheduler in your React app using Nylas Scheduler. Streamline bookings and UX with step-by-step guidance.

Beyond APIs: Designing elegant, smart Web Components

Dive into the world of smart Web Components for advanced API integration solutions. Design elegant, customizable elements to elevate user experiences.

How to integrate a React calendar component to streamline scheduling

Elevate your app’s scheduling with a React calendar component and seamlessly integrate with Nylas for efficient calendar management.