Patching Packages - The ULTIMATE Guide

🩹 Found a bug in a package and want to fix it locally? Waiting for a fix that wasn't released yet? Don't worry, you can apply all these locally to the packages in your node_modules. In this video, a guide for all major package managers showcases how you can patch your packages locally, why "doing it manually" is not a good idea and which consequences local patches might have.
Worth watching for every developer! 🙌
---
Key points:
4️⃣ Strategies for NPM, Yarn (1 and 2+), PNPM and Bun
✨ Real-world use case!
‼️ Consequences when patching locally
---
Links:
🔗 Nitro nitro.unjs.io/
🔗 Real World Issue github.com/unjs/db0/issues/62
🔗 patch-package package www.npmjs.com/package/patch-p...
📺 ‪@DejaVueFm‬ #014 - VueUse and Our Favorite Composables - share.transistor.fm/s/27d405c8
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
---
Chapters:
00:00 Intro
00:32 Agenda
01:27 Demo Application and Real World Error
02:36 Googling the Error and Finding an Issue
03:30 Unmerged PR which Fixes the Error
04:30 Manually Patching the Package
05:30 Problems with Manual Patches
06:30 Patching Packages with NPM
10:22 Patching Packages with Yarn 1
11:33 Patching Packages with Yarn 2 and higher
13:55 Patching Packages with PNPM
15:19 Patching Packages with Bun
16:49 Consequences of Patching Packages
18:44 Summary

[@TheAlexLichter]

Which package manager do you usually prefer and why? 👀

[@lovelyboy8056]

pnpm because it’s a new. It’s use less space on ssd and it faster than yarn and npm how I read about it

[@namesiz]

pnpm because I easily solve all the problems I encounter (which I cannot solve in others)

[@slava_trushkin]

pnpm because it handles monorepos way better than others

[@EvestDev]

Bun, its fast and it has a lot of cool built in features :)

[@randomtimessomehow]

pnpm, because I had some weird npm bug once, didn't know how to fix it so I switched lol also heard it's faster

[@randomtimessomehow]

What the hell, how come I needed this yesterday for the first time and this is exactly when you released this video 😃

[@TheAlexLichter]

Perfect timing 🔥👌🏻

[@michaelpumo83]

This is legit useful - thanks so much for a great video.

[@alimaher1]

Waited for this for so long time. Thanks, Alex ♥

[@TheAlexLichter]

You are very welcome 🙌

[@EvestDev]

ooh frick, thats so cool 🤩, how did i not known about this O.O. Thx for the super cool video :)) No i don't have more excuses for anything that doesn't work XD

[@TheAlexLichter]

You are welcome!
Exactly 👀 and a good chance to send in PRs too 👌🏻

[@lbmgary]

holy crap... how do I not know things? :| Thanks bruv!

[@TheAlexLichter]

You are welcome 🙌🏻

[@djxak]

Yarn and Pnpm patch flows do not make sense to me. How could I test my changes and know that it is time to create a patch, if I must edit not the live version of the package, but a temporary version of it?
And, unfortunately, most packages can't be patched this way anyway. Because you need to patch their sources, not their distribution package.

[@NicolasVanAarsen]

Oh, I didn't know that, nice tip!

[@TheAlexLichter]

Glad it was helpful! ☺️

[@QueeeeenZ]

How do you patch those packages that ship minified code? They only have a dist/ in node_modules which is minified and impossible to edit. Also how would you patch larger projects with TypeScript that requires building?

[@TheAlexLichter]

Minified: if you find the corresponding source via debugging there, otherwise fork + publish a temp NPM package under your name. Same for having TS support too etc