How to patch an NPM dependency
Tags: node, npm, javascript
Published: 2021-02-11 13:12:30

---
title: How to patch an NPM dependency
published: true
date: 2021-02-08 00:00:00 UTC
tags: node, npm, javascript
canonical_url: https://www.mariokandut.com/how-to-patch-an-npm-dependency/
---

You are working on a node/react/angular/... project and, you've discovered that one of your dependencies has a bug. What are you going to do?

First, **don't panic**. There are several options available to fix this:

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#package-maintainer)Package Maintainer

The easiest solution, and only applicable if the project is not time-critical, is to open an issue on the package's Github/Gitlab repository and hope the package maintainer fixes the bug soon.

Unfortunately, this will take a while and, you've got a project deadline at some point.

[💰: $100 (credits) for you to start your cloud journey with DigitalOcean!](https://m.do.co/c/29f238135b61)

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#fork--fix-it-yourself)Fork & Fix it yourself

In my opinion, if you are using open source software try to contribute. Hence, start with fixing the bug in the package yourself. 😀

**Fork** the broken package’s repository and create a new branch and **fix** the issue. Push your changes and update your `package.json`. For example:

```
"dependencies": {
  "broken-package": "USERNAME/broken-package#BRANCH-WITH-FIX"
}
```

Now everybody will get a patched version installed when they run `npm install` or `npm update`. This has a good side (bugfix), and a not-so-good side (you have to maintain your fork).

Next step is to open a PR/MR with the bugfix on the repository of the package and eventually the PR gets accepted, merged and, a package update published to npm. In this case, simply revert your dependency declaration for the broken-package in package.json and run `npm install broken-package`.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#use-patch-package)Use patch-package

Yes, you've read right, there is an NPM package to fix broken packages. 😀

[patch-package](https://github.com/ds300/patch-package) lets app authors instantly make and keep fixes to npm dependencies.

How it works:

```
# fix a bug in one of your dependencies
vim node_modules/some-package/brokenFile.js

# run patch-package to create a .patch file
npx patch-package some-package

# commit the patch file to share the fix with your team

git add patches/some-package+3.14.15.patch
git commit -m "fix brokenFile.js in some-package"
```

Patches created by patch-package are automatically and gracefully applied when you use npm(>=5).

Add `postinstall script`:

```
 "scripts": {
   "postinstall": "patch-package"
 }
```

Install `patch-package` with flag `--save` (package is used in production) or `--save-dev`.

```
npm i patch-package --save-dev
```

Make a patch:

```
npx patch-package package-name
```

If this is the first time you've used patch-package, it will create a folder called `patches` in the root directory of your app. Inside will be a file called package-name+0.44.0.patch or similar, which is a diff between normal old `package-name` and your fixed version. **Commit this to share the fix** with your team.

**Benefits of using patch over fork:**

- Sometimes forks need **extra build steps**
- Get notified when the **dependency changed** , and you need to **check** that your **fix** is still valid.
- **Keep your patches co-located** with the code that depends on them.
- **Patches can be reviewed** as part of your normal review process, forks probably can't.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)TL;DR

There are three options to fix an NPM dependency:

- Open a bug ticket on the repository of the maintainer
- Fork & Fix
- Create a patch and fix it

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**.

If you want to know more about **[Node](https://www.mariokandut.com/tags/node)**, have a look at these [Node Tutorials](https://www.mariokandut.com/tags/node).

References (and Big thanks):

[Josh Sutphin](https://medium.com/@invicticide/patching-an-npm-dependency-without-going-completely-insane-aa0b110a80c), [Patch-Package](https://github.com/ds300/patch-package)