Yarn patch package

links: JS MOC

---

When to use yarn patch

Consider a scenario where there is a small bug in one of the packages you installed. Now you want to fix the bug and use it. You can modify it, but in order to share the patch with your team, you either need to fork the library or use it in your dependencies. The problem is the forked package needs to be maintained regularly. You can avoid this scenario by using the patch from yarn or patch-package library

How to use it?

By default, yarn saves all the patches under .yarn/patches which I personally consider not a sensible default.

You can get the patch folder with this command

yarn config get patchFolder

Let’s change it to use the patches folder

yarn config set patchFolder patches

An alternative way of changing patchFolder is to open .yarnrc.yml and then add it

patchFolder: patches

Let’s start patching a package

yarn patch <package-name>

Now open the folder and edit the changes

Once the changes are made run the following command

yarn parch-commit <path-to-edited-folder> -s

The -s will add the patch file under patches and also add the package name under the resolution field.

That’s it. Now the patched library will be automatically used by yarn for everyone in the team

There is a bug with Transitive Dependencies so either change the resolution to match transitive dependency or pin the package version to a specific dependency

if you have a transitive dependency like this

"react-native": "^0.67.2",

For Example Under resolutions

"resolutions": {
  "react-native@^0.67.2": "patch:react-native@npm:0.67.2#patches/react-native-npm-0.67.2-1a4b75e39f"
}

Or else you can just pin the dependency like this

"react-native": "0.67.2",

---

tags: patch, package-manager