zach.codes

Share this post

Patching npm modules with patch-package

zach.codes

Patching npm modules with patch-package

When nobody wants to merge a PR in time....

Zach Silveira
Oct 4, 2023
Share this post

Patching npm modules with patch-package

zach.codes
2
Share

A couple weeks ago, I updated a package. expo-router to be specific.

For some reason nobody wanted to merge a simple fix for a console warning that keeps appearing incorrectly.

When this happens you have a few options

Use a different module

This isn’t ideal unless you are using a very simple npm package, but it’s something you can do if alternatives exist.

Patch the current package

Doing this in 2023 is incredibly easy, some package managers even have built in support. To keep this short and simple, I’ll just explain how to use the patch-package npm module.

If you are using yarn 1:

yarn add patch-package postinstall-postinstall

npm:

// add this to package.json

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

// then
npm i patch-package

Yarn 2:

Use yarn-patch natively: https://yarnpkg.com/cli/patch

Patching Expo Router

For this problem, someone found the exact location of the problem and made a PR, it just didn’t get merged when I needed it fixed. They left a comment here.

To receive new posts and support my work, consider becoming a free or paid subscriber.

The first thing I did was go look at their PR, it was a very simple null check that was missing:

All I had to do was open up this file in my node_modules folder, and then add that line change. Afterwards, I ran “npx patch-package expo-router” and the patch was created in my local repo and applied anytime someone installs dependencies in the future.

This is super useful, considering I had another issue with expo-router and had to patch that one as well.

When you have a full time job, you don’t have time to wait on PR’s to be merged and need an instant fix for problems. Thankfully this problem was just a console annoyance, but I’ve had to patch much worse problems in the past.

When there are annoying bugs that are easily fixable, search the project’s codebase for the text you see appearing in your problem, or search for the component that is having an issue. This helps me reverse engineer the problem quickly and then patch it myself if I need to.

Of course, sending a PR is always the best long term solution :)

Leave a comment

Share this post

Patching npm modules with patch-package

zach.codes
2
Share
Previous
Next
2 Comments
Share this discussion

Patching npm modules with patch-package

zach.codes
Michael Carter
Oct 5Liked by Zach Silveira

I also agree that `patch-package` is an amazing tool. It helps you remove blockers so you can move forward with your project.

One of the paint points though is that some packages you want to patch go through a build process where the code gets transpiled, bundled, or worse, minified. So it's not always easy to find the code in `node_modules` that you want to patch.

If you're able to build the package locally (and that's not always easy), you could then update the source and generate the package files to create the patch.

Expand full comment
Reply
Share
1 reply by Zach Silveira
1 more comment...
Top
New
Community

No posts

Ready for more?

© 2023 Zach Silveira
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing