DEV Community

Cover image for The easiest way to patch your npm package when there is a 🐛
Zhitomir Oreshenski
Zhitomir Oreshenski

Posted on • Updated on

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');
Enter fullscreen mode Exit fullscreen mode

2) Install patch-package:

     npm install patch-package -D 
Enter fullscreen mode Exit fullscreen mode

or via Yarn:

     yarn add patch-package postinstall-postinstall --dev
Enter fullscreen mode Exit fullscreen mode

and also add postinstall script:

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

Enter fullscreen mode Exit fullscreen mode

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

    npx patch-package react-redux or yarn patch-package react-redux
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

4) Apply your fix via npm package manager:

   npm install or yarn install
Enter fullscreen mode Exit fullscreen mode

5) Add your staged changes:

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

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

Top comments (14)

Collapse
 
jdnichollsc profile image
J.D Nicholls

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

Collapse
 
vishal38isharani profile image
Vishal isharani

Very good solution, thanks a bunch @zhnedyalkow

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

Very useful. Thanks for sharing.

Collapse
 
zhnedyalkow profile image
Zhitomir Oreshenski

Nice to hear that!

Collapse
 
jcubic profile image
Jakub T. Jankiewicz • Edited

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

Thread Thread
 
zhnedyalkow profile image
Zhitomir Oreshenski

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

Collapse
 
xpalacincreditoh profile image
Xavier Palacín Ayuso

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

Collapse
 
smetankajakub profile image
Jakub Smetanka • Edited

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

Collapse
 
obayit profile image
Obay Abdelgadir

Thanks, this helped me.

Collapse
 
mohsen0 profile image
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?

Collapse
 
thidasapankaja profile image
Thidasa Pankaja Paranavitharana

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

Collapse
 
zhnedyalkow profile image
Zhitomir Oreshenski

Yes, it is safe

Collapse
 
gauravksoni profile image
Gaurav Kant Soni • Edited

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

Collapse
 
reinholdmain profile image
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 :(