DEV Community

Cristian Velasquez Ramos
Cristian Velasquez Ramos

Posted on • Originally published at cvr.im

2 1

The power of patch-package

Have you ever been in a situation where a package has a bug that's blocking you?

Have you ever gone to the package's GitHub page, searched for an issue that matches your problem, and commented "I need this fix"?

Stop that.

What you need is patch-package.

I can't tell you enough how useful this is. Instead of having to wait for fixes to be released, I use this tool as a hotfix, and when a new version is ready that includes the fix, I simply delete the patch file it generates.

Here's an example that came up recently:

I upgraded our app to CRA 4.0 at work, but noticed that the build and rebuild times became much slower.

Looked around to find this comment inside a GitHub issue that matched my problem.

Went to node_modules/react-scripts/config/webpack.config.js like the comment said and plopped this in:

new ESLintPlugin({
    // Plugin options
    cache: true, // this
    extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
    formatter: require.resolve('react-dev-utils/eslintFormatter'),
    ...
Enter fullscreen mode Exit fullscreen mode

All that was left was to run yarn patch-package react-scripts.

Aww man, it's that easy?

Yeah, it is.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay