Fixing NPM dependencies with patch-package
We’ve all come across NPM packages that has multiple issues that haven’t been addressed in forever. Either the package isn’t maintained anymore, there’s a pull request pending to fix the issue that hasn’t been approved yet or the issue hasn’t just downright been fixed yet. And sometimes there’s an urgency in fixing the issue to the point where you cannot wait around for a patch to be released, a pull request to be approved or even to fork it and publish your own NPM package.
Although it is not the conventional way of doing things, another method of getting a fix up and running as soon as possible to continue with the development work is to update the package within node_modules manually. While this seems pretty straightforward, there are complications such as the necessity to make the changes every-time you install node modules, install a new dependency, or if you were to work in a team of several members, having to make the changes every-time someone sets up the project or even installs node modules by themselves. Imagine the hassle!
This is where patch-package shines. This package allows developers update NPM dependencies and save the changes to a .patch file. Even better yet, the package allows developers to apply the saved patches using just one command. Lets’ try it out!
I’m going to take an issue that I came across recently as an example. I was on the hunt for a date picker library for React Native and came across react-native-date-picker which fit every single criteria that I was looking for. But the library had one small issue, for React-Native version 0.61.5 (The version the project I was working on was using) the Android version was not compiling due to a single line. Once we comment out the line and voila! the app was back to compiling.
As you can see above the line super.setTextColor(color) was the culprit. After doing some research and concluding that the line is not required for any of my use-cases, I decided to look for a way to retain the changes across other developers and also after the installation of node modules because lets be honest, it will be a nuisance to look for the file and update it every-time I add or remove packages. So lets get started on making the patch. We can start by adding the packages patch-package and postinstall-postinstall.
if you’re using NPM
npm install --save-dev patch-package postinstall-postinstallor in my case I was using Yarn.
yarn add -D patch-package postinstall-postinstallThe latter package is installed in-order to avoid having to run the command to apply the patch after installing new dependencies. The next step would be to make the necessary changes in the NPM dependency that was causing the issue. In my case I had already commented out line number 57 in AndroidNative.java file (which was causing the compilation issue). Once you’ve made the required changes within the NPM dependency, it is just a matter of executing npx patch-package {{package-name}} in-order to create the .patch file. In my case it was,
npx patch-package react-native-date-pickerAnd voila! a patch will be created within a folder named patches inside the root folder.
To make sure that the patch works, we can start by either reverting the changes that were made to the package in node_modules, or simply by removing node_modules altogether and re-installing using npm install or yarn. Once we’ve done that we can run the npx patch-package command inside the root folder and the patches will be applied.
To make things even easier, lets add the patch command to the postinstall script so we don’t have to go through the trouble of running npx patch-package every-time we install a dependency.
Whenever you run npm install or yarn commands again postinstall will take care of executing the npx patch-package command which will make the required changes to the NPM dependency that needed the package.
While not being the conventional way of fixing issues in a NPM package, the above method allows us to quickly patch up any underlying issues and continue with development without further delays. Once you can spare the time do not forget to raise a pull request to the original repository addressing the issue, so that the rest of the community doesn’t have to go through the trouble of doing it all over again.
Finally, I would like to thank David Sheldrick, the author of patch-package for making my life easier.
Thats all folks! Thanks for reading my article and happy coding! :)
