Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

How to Patch NPM Packages

Published by: Noc Folio3 | March 7, 2022 msaqlain
SCROLL AND BE AMAZED!
Home > React Native > How to Patch NPM Packages

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


About Noc Folio3

Newsletter

Search

Archives

  • December 2023
  • April 2023
  • March 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • October 2021
  • September 2021
  • May 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019

Recent Posts

  • Exploring Flutter Navigation: From Basics to Advanced Routes
  • Web UI Test Automation with Pytest-BDD
  • How to fix IOS compass calibration issues
  • Testing Android Applications With Perfect Coverage
  • How to use useRef hook efficiently? – React

Tags

  • android
  • angular-state-management
  • Automation
  • Compass
  • cross-platform
  • css
  • development
  • firebase
  • hooks
  • ios
  • learn-ngrx
  • ngrx-beginner
  • ngrx/store
  • QA
  • react-native
  • reactjs
  • scss
  • stylesheet
  • styling
  • Testing
  • Test Script
  • UI-UX

Newsletter

Newsletter

Post navigation

Previous Firebase Crashlytics Integration in React Native
Next Speech to Text Recognition in React Native
Schedule an Appointment with our Mobile App Development Expert
Footer Menu
  • Company
    • About Us
    • Portfolio
    • Blog
    • Careers
    • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise App Development
    • AR/VR Application Development
    • IoT Application Development
    • Wearables Apps Development
    • Field Sales
    • On-Demand Apps Development
  • Technologies
    • iOS
    • Android
    • React Native
    • Flutter
    • Ionic
    • Xamarin
    • NativeScript
    • HTML5
    • Sencha
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical
    • Manufacturing
    • Automotive
    • Logistics
    • Education

US Office

Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

Tel: +1 408 365 4638
Support: +1 (408) 512 1812

Mexico Office

Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

Bulgaria Office

49 Bacho Kiro Street, Sofia, 1000, Bulgaria

Canada Office​

895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

UK Office

Export House, Cawsey Way, Woking Surrey, GU21 6QX

Tel: +44 (0) 14 8361 6611

UAE Office

Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

Tel: +971-55-6540154
Tel: +971-04-2505173

Pakistan Office

Folio3 Tower, Plot 26, Block B, SMCH Society, Main Shahrah-e-Faisal, Karachi.

First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore.

Tel: +92-21-3432 3721-4 

© 2025, Folio3 Software Inc., All rights reserved.

  • Privacy policy and terms of use
  • Cookie Policy
Follow us on
Facebook-f Linkedin-in Instagram

Get a free app audit

[contact-form-7 id="3548" title="Float Banner Form"]