Quick Summary

So you need to make a quick change in an npm package but you don't want the overhead of maintaining a forked version of an npm package and waiting for your pull request to be live is not an option since the change you need has to be quick. What if you could just go and edit the files inside the node_modules and start using it? Well, that's something that patch-package helps you to do.

When we need a slight modification, bug fix, or adding a feature to any of the node_modules the common paths available are either to create a fork, add our changes and replace the original package with our forked version or we can make the changes and open a pull request on the original package and get that fix or feature merged. These two processes have their own pros and cons and may be more suitable for some use cases but not for others.

How does patch-package solve this?

With patch-package we can make the changes to the package inside node_modules and it keeps those changes inside a patch file in the project. So when we run yarn/npm install, patch-package takes care of applying those changes in our node_modules after installing the dependencies.

Let us consider react-filter-control as an example to discuss the usage.
react-filter-control is a small UI library for advanced filters, which looks like this Here, field1 at the top is the field on which filter is applied, Equal is the operator, and 1 is the value.
react-filter-control accepts name and caption for both, fields and operators. Where caption should be used to display to the user and name could work as an id of that field or operator.
For the first condition the data looks like this

  name: 'field1',
  caption: 'Field',
  operators: [{
    name: '=',
    caption: 'Equals',
  }, {
    name: '<>',
    caption: 'Does not equal',
  }],
}

As we can see in the image above, caption works fine with the operators but it does not work with the field. With the data that is passed to the component, we should expect the caption 'Field' to be shown in the UI instead of the name. This seems easy to solve by replacing the value that the field component is rendering.
Looking at the code inside react-filter-control package, we find that

The textField for field dropdown is using the name property instead of the caption as in the operators dropdown. After changing it to caption, it starts working as expected by rendering the caption instead of the name.

After making the changes to the package let's run

yarn patch-package react-filter-control

I had faced an issue with the package.lock file while trying to create a patch. It can be solved by using the --use-yarn option or deleting the package.lock file.

After successfully creating the patch, patch-package creates a patch folder in our project where it keeps the patches that we make to any packages. The patch file looks like this Here, we can see our changes in a diff.
So this quick change fixes the issue in the npm package and we can start using it right away.

Thanks for reading!

Links

patch-package