The easiest way to patch your npm package when there is a 🐛

What do you do when you are working on npm-based project and encounter an issue with one of your dependecies?

• The easiest way and actually most devs do, is go to Github's package repository and log a bug. The real problem with that can be the lack of time that a maintainer has to fix it. But unfortunately, the deadline is comming up and you have to find another way at least for couple of weeks.

• Fork the broken package, fix it and open a PR. Well that seems to be a good solution at first, but it also means that you need to keep it locally until the maintainer approve the changes and merge them with the main branch.

Hmm what now..?

• The best approach in such cases would be to perform your changes into a dependency and apply the fix via npm using 'patch-package'. But wait.. how this actually work? Well, very simple:

1) Fix a bug in one of your dependencies
nano node_modules/react-redux/dist/react-redux.js

     console.log('Hi I am a redux patch');

2) Install patch-package:

     npm install patch-package -D 

or via Yarn:

     yarn add patch-package postinstall-postinstall --dev

and also add postinstall script:

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

3) Run patch-package to create a .patch file

    npx patch-package react-redux or yarn patch-package react-redux

This will produce following changes:

diff --git a/node_modules/react-redux/dist/react-redux.js b/node_modules/react-redux/dist/react-redux.js
index c56d7f2..3a2b1e2 100644
--- a/node_modules/react-redux/dist/react-redux.js
+++ b/node_modules/react-redux/dist/react-redux.js
@@ -27,6 +27,8 @@
    // nor polyfill, then a plain number is used for performance.
    var hasSymbol = typeof Symbol === 'function' && Symbol.for;

+   console.log('Hi I am a redux patch');
+
    var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
    var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
    var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;

4) Apply your fix via npm package manager:

   npm install or yarn install

5) Add your staged changes:

   git add .
   git commit -m 'bugfix/react-redux: Fix a react-redux bug'
   git push origin bugfux/react-redux

Thank you, hope you enjoy this post!
Happy coding!😊

Comments

[J.D Nicholls]

This article is so helpful, thanks for sharing! <3

[Vishal isharani]

Very good solution, thanks a bunch @zhnedyalkow

[Jakub T. Jankiewicz]

Very useful. Thanks for sharing.

[Zhitomir Oreshenski]

Nice to hear that!

[Jakub T. Jankiewicz]

One note you can try to color the snippets with Github like code blocks. (triple backticks and name of the language).

[Zhitomir Oreshenski]

Great, I did not know that. Thank you, I will update the post tomorrow

[Xavier Palacín Ayuso]

How do you patch a package with @ in the name eg @namespace/package?

[Jakub Smetanka]

Probably its not relevant for you anymore, but can help to others :)
from official doc.

[Obay Abdelgadir]

Thanks, this helped me.

[Mohsen]

so there is no way to run a patch when we run npm install --production, because running npm install will ship the dev deps with the application. any suggestions?

[Thidasa Pankaja Paranavitharana]

But is this safe for production apps ? Like medium scaled ones with number of users ?

[Zhitomir Oreshenski]

Yes, it is safe

[Gaurav Kant Soni]

While running yarn patch-package packageName it gives the following error

Request failed \"401 Unauthorized\
I have deleted the registry and npmrc still no luck

[Daniel Main]

What if I need to change something in package.json ? due this is being executed in postinstall any patch-changes in package.json are useless :(