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!😊
Top comments (14)
This article is so helpful, thanks for sharing! <3
Very good solution, thanks a bunch @zhnedyalkow
Very useful. Thanks for sharing.
Nice to hear that!
One note you can try to color the snippets with Github like code blocks. (triple backticks and name of the language).
Great, I did not know that. Thank you, I will update the post tomorrow
How do you patch a package with @ in the name eg @namespace/package?
Probably its not relevant for you anymore, but can help to others :)
from official doc.
Thanks, this helped me.
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?But is this safe for production apps ? Like medium scaled ones with number of users ?
Yes, it is safe
While running
yarn patch-package packageName
it gives the following errorRequest failed \"401 Unauthorized\
I have deleted the registry and npmrc still no luck
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 :(