• Stars
    star
    10,288
  • Rank 3,369 (Top 0.07 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Fix broken node modules instantly 🏃🏽‍♀️💨

patch-package

patch-package lets app authors instantly make and keep fixes to npm dependencies. It's a vital band-aid for those of us living on the bleeding edge.

# fix a bug in one of your dependencies
vim node_modules/some-package/brokenFile.js

# run patch-package to create a .patch file
npx patch-package some-package

# commit the patch file to share the fix with your team
git add patches/some-package+3.14.15.patch
git commit -m "fix brokenFile.js in some-package"

Patches created by patch-package are automatically and gracefully applied when you use npm(>=5) or yarn.

No more waiting around for pull requests to be merged and published. No more forking repos just to fix that one tiny thing preventing your app from working.

Set-up

In package.json

 "scripts": {
+  "postinstall": "patch-package"
 }

Then

npm

npm i patch-package

You can use --save-dev if you don't need to run npm in production, e.g. if you're making a web frontend.

yarn v1

yarn add patch-package postinstall-postinstall

You can use --dev if you don't need to run yarn in production, e.g. if you're making a web frontend.

To understand why yarn needs the postinstall-postinstall package see: Why use postinstall-postinstall

yarn workspaces

Same as for yarn ☝️ Note that if you want to patch un-hoisted packages you'll need to repeat the setup process for the child package. Also make sure you're in the child package directory when you run patch-package to generate the patch files.

yarn v2+

yarn 2+ have native support for patching dependencies via yarn patch. You do not need to use patch-package on these projects.

pnpm

pnpm has native support for patching dependencies via pnpm patch. You do not need to use patch-package on these projects.

Heroku

For patch-package to work on Heroku applications, you must specify NPM_CONFIG_PRODUCTION=false or YARN_PRODUCTION=false. See this issue for more details.

Docker and CI

  • If having errors about working directory ("cannot run in wd [...]") when building in Docker, you might need to adjust configuration in .npmrc. See #185.
  • In your Dockerfile, remember to copy over the patch files before running [npm|yarn] install
  • If you cache node_modules rather than running yarn install every time, make sure that the patches dir is included in your cache key somehow. Otherwise if you update a patch then the change may not be reflected on subsequent CI runs.

CircleCI

Create a hash of your patches before loading/saving your cache. If using a Linux machine, run md5sum patches/* > patches.hash. If running on a macOS machine, use md5 patches/* > patches.hash

- run:
    name: patch-package hash
    command: md5sum patches/* > patches.hash

Then, update your hash key to include a checksum of that file:

- restore_cache:
    key: app-node_modules-v1-{{ checksum "yarn.lock" }}-{{ checksum "patches.hash" }}

As well as the save_cache

- save_cache:
    key: app-node_modules-v1-{{ checksum "yarn.lock" }}-{{ checksum "patches.hash" }}
    paths:
      - ./node_modules

Usage

Making patches

First make changes to the files of a particular package in your node_modules folder, then run

yarn patch-package package-name

or use npx (included with npm > 5.2)

npx patch-package package-name

where package-name matches the name of the package you made changes to.

If this is the first time you've used patch-package, it will create a folder called patches in the root dir of your app. Inside will be a file called package-name+0.44.0.patch or something, which is a diff between normal old package-name and your fixed version. Commit this to share the fix with your team.

Options

  • --create-issue

    For packages whose source is hosted on GitHub this option opens a web browser with a draft issue based on your diff.

  • --use-yarn

    By default, patch-package checks whether you use npm or yarn based on which lockfile you have. If you have both, it uses npm by default. Set this option to override that default and always use yarn.

  • --exclude <regexp>

    Ignore paths matching the regexp when creating patch files. Paths are relative to the root dir of the package to be patched.

    Default value: package\\.json$

  • --include <regexp>

    Only consider paths matching the regexp when creating patch files. Paths are relative to the root dir of the package to be patched.

    Default value: .*

  • --case-sensitive-path-filtering

    Make regexps used in --include or --exclude filters case-sensitive.

  • --patch-dir

    Specify the name for the directory in which to put the patch files.

Nested packages

If you are trying to patch a package at, e.g. node_modules/package/node_modules/another-package you can just put a / between the package names:

npx patch-package package/another-package

It works with scoped packages too

npx patch-package @my/package/@my/other-package

Updating patches

Use exactly the same process as for making patches in the first place, i.e. make more changes, run patch-package, commit the changes to the patch file.

Applying patches

Run patch-package without arguments to apply all patches in your project.

Options

  • --error-on-fail

    Forces patch-package to exit with code 1 after failing.

    When running locally patch-package always exits with 0 by default. This happens even after failing to apply patches because otherwise yarn.lock and package.json might get out of sync with node_modules, which can be very confusing.

    --error-on-fail is switched on by default on CI.

    See #86 for background.

  • --reverse

    Un-applies all patches.

    Note that this will fail if the patched files have changed since being patched. In that case, you'll probably need to re-install node_modules.

    This option was added to help people using CircleCI avoid an issue around caching and patch file updates but might be useful in other contexts too.

  • --patch-dir

    Specify the name for the directory in which the patch files are located

Notes

To apply patches individually, you may use git:

git apply --ignore-whitespace patches/package-name+0.44.2.patch

or patch in unixy environments:

patch -p1 -i patches/package-name+0.44.2.patch

Dev-only patches

If you deploy your package to production (e.g. your package is a server) then any patched devDependencies will not be present when patch-package runs in production. It will happily ignore those patch files if the package to be patched is listed directly in the devDependencies of your package.json. If it's a transitive dependency patch-package can't detect that it is safe to ignore and will throw an error. To fix this, mark patches for transitive dev dependencies as dev-only by renaming from, e.g.

package-name+0.44.0.patch

to

package-name+0.44.0.dev.patch

This will allow those patch files to be safely ignored when NODE_ENV=production.

Benefits of patching over forking

  • Sometimes forks need extra build steps, e.g. with react-native for Android. Forget that noise.
  • Get told in big red letters when the dependency changed and you need to check that your fix is still valid.
  • Keep your patches colocated with the code that depends on them.
  • Patches can be reviewed as part of your normal review process, forks probably can't

When to fork instead

  • The change is too consequential to be developed in situ.
  • The change would be useful to other people as-is.
  • You can afford to make a proper PR to upstream.

Isn't this dangerous?

Nope. The technique is quite robust. Here are some things to keep in mind though:

  • It's easy to forget to run yarn or npm when switching between branches that do and don't have patch files.
  • Long lived patches can be costly to maintain if they affect an area of code that is updated regularly and you want to update the package regularly too.
  • Big semantic changes can be hard to review. Keep them small and obvious or add plenty of comments.
  • Changes can also impact the behaviour of other untouched packages. It's normally obvious when this will happen, and often desired, but be careful nonetheless.

Why use postinstall-postinstall with Yarn?

Most times when you do a yarn, yarn add, yarn remove, or yarn install (which is the same as just yarn) Yarn will completely replace the contents of your node_modules with freshly unpackaged modules. patch-package uses the postinstall hook to modify these fresh modules, so that they behave well according to your will.

Yarn only runs the postinstall hook after yarn and yarn add, but not after yarn remove. The postinstall-postinstall package is used to make sure your postinstall hook gets executed even after a yarn remove.

License

MIT

Empowered by Futurice's open source sponsorship program

More Repositories

1

react-native-typescript-transformer

Seamlessly use TypeScript with React Native
JavaScript
657
star
2

lazyrepo

Caching task runner for npm/pnpm/yarn monorepos.
TypeScript
528
star
3

derivablejs

Functional Reactive State for JavaScript and TypeScript
JavaScript
515
star
4

jetzt

Speed reader extension for chrome
JavaScript
486
star
5

postinstall-postinstall

JavaScript
53
star
6

android-capture

Capture video and screenshots from Android devices and emulators.
JavaScript
34
star
7

code-in-motion

JavaScript
17
star
8

cfg

Option management for Clojure
Clojure
11
star
9

ddom

derivable dom
JavaScript
11
star
10

redux-mobx-connect

A simple alternative to react-redux
TypeScript
9
star
11

gudetama

Make your CI scripts as lazy as possible
TypeScript
7
star
12

prismic-react

Compiling Prismic.io content to ReactElements
JavaScript
5
star
13

lunch-time

TypeScript
5
star
14

apt

Anchored Packed Trees for compositional distributional semantics
Java
3
star
15

artsy-nonlocality

Chrome extension for artsy employees to launch zoom meetings more easily
TypeScript
3
star
16

patch-package-website-design

figma file for unused patch-package website design
3
star
17

derivables-talk-demo

Code demonstration of Derivables from my talk
JavaScript
2
star
18

rn-back

dual n-back in react native
JavaScript
2
star
19

postinstall-prepare

JavaScript
2
star
20

kfs

TypeScript
2
star
21

encrypt-and-decrypt

TypeScript
2
star
22

atom-gitnav

move forward and backward through git history with hotkeys
CoffeeScript
1
star
23

mental

super simple mental arithmetic game
JavaScript
1
star
24

loggy

dumb irc room logger
Go
1
star
25

norm

A suite of tools coalescing into a lexical normalisation system for tweets.
Clojure
1
star
26

TestCustomSourceExts

Objective-C
1
star
27

apt-py

python api for reading and manipulating APTs
Python
1
star
28

vimes

oh lisp
TypeScript
1
star
29

sicp

going through sicp in emacs
Scheme
1
star
30

nlp-trie

Immutable trie implementation for Clojure. Uses string keys. Optimised for lookups and traversal.
Clojure
1
star
31

gridster

JavaScript
1
star
32

FlowDoge

wow such flow
TypeScript
1
star