Sometimes when we have several packages installed in our applications and we see that one of the packages has a broken functionality out of nowhere. At that point time, we are left with the following options:
- We are in a hurry to ship the build, so we can just fix the method which is malfunctioning and ship the build. This is the most spontaneous solution we can do, but is it a good one? Probably not. The reason is that we can lose this fix when we run yarn for the next time, and this fix is at our local machine, so it wonât work on our fellow developerâs machine.
- We are not in a hurry, so we go to the Github of the package and open an issue. When this is fixed in the next release of the package, we can update our package. But who wants to wait?
- So what we can do is we can make use of âpatch-packageâ, to apply a bandage to a broken package and that bandage doesnât wash away with running yarn for the next time, because this bandage lives with our applicationâs GitHub repository.
With our understanding ready about the patch-package, lets see how to use it:
Make sure youâre at the root of your project, and from there run the following command from terminal:
yarn add redux
Or
npm i redux
Next we install and setup, âpatch-package
â, again from your terminal run:
npm i patch-package
or
yarn add patch-package postinstall-postinstall
Why did we install postinstall-postinstall? Details are at the bottom.
Next we add a script in package.json which will be execute after the yarn or npm installation is completed:
âscriptsâ : {
âpostinstallâ: âpatch-packageâ
}
Now we are all set to make some changes to redux package and letâs assume it isnât working and weâre going to fix it by:
- Going to node_modules/redux/src/index.js
- Adding a console.log(âI am working fine by patching redux !!â) right after all the imports.
Now we will run the following command from the terminal:
yarn patch-package redux
Or
npx patch-package redux
This will now create a patches directory at your root folder. Inside of it, you will see a redux+4.1.2.patch file. The numbers in the file name represent the currently installed redux version from package.json.
Thatâs it. We are now free from all the worries. Now when you commit this patch file, it will be stored alongside your other files on your projectâs GitHub repository.
Thereâs one last thing and that is to test our implementation. Letâs remove the redux package by running:
yarn remove redux
Or
npm uninstall redux
Now we donât have our console.log as a fix in the redux package as we completely removed redux. Letâs re-install redux and see if the patch-package
applies our changes which are created as a patch in the patches folder.
Run following in the terminal:
yarn add redux
Or
npm i redux
Now if we go to node_modules/redux/src/index.js, we see our console.log living there. Congrats, youâve bandaged the redux package successfully.
Why did we install âpostinstall-postinstall
â package when installing through yarn?Â
The answer is when we run yarn, yarn add, yarn remove, Yarn actually replaces your current node_modules with a fresh installation. And in the case of running yarn remove, Yarn doesnât call the post install hook. So the âpostinstall-postinstallâ package actually calls the post install hook after every yarn remove call. So if we didnât install this postinstall-postinstall package, what wouldâve happened is that our patch wouldnât have been executed and our application won’t work then.
Thanks for reading, Donât forget to share your thoughts in comment section!
For reference:
https://www.npmjs.com/package/patch-package