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!😊