How to modify a node_module with patch-package

Unlock the potential of node_module customizations, easily fixing and enhancing your development.

10/23/2023

How to Seamlessly Modify Node Modules

Sometimes the packages we rely on might not work perfectly for our needs. Today, we’ll dive into how you can modify node_modules effortlessly using patch-package.

Step-by-Step Guide:

1. Identify the Module to Modify: For this demonstration, I’m adjusting astro-embed which resides in the node_modules directory. Always ensure you navigate through the module’s folders to pinpoint the exact code segment you’re looking to modify.

2. Make Necessary Adjustments: My objective was simple: change the src attribute of the img tag to leverage hq720.jpg over hqdefault.jpg:

// Sample code showcasing the modification...
const posterURL = poster || `https://i.ytimg.com/vi/${videoid}/hq720.jpg`;

3. Set Up Patch-Package: Install the required packages:

yarn add -D patch-package postinstall-postinstall

4. Generate a Patch: Execute the command tailored to the file/module you adjusted:

yarn patch-package @astro-community/astro-embed-youtube

This command creates a patches folder in your repository, capturing the changes. Rest assured, your existing setup remains unharmed.

5. Deploy with Confidence: To ensure deployments use the patched version, update your package.json:

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

There you have it! You’re all set to deploy your website with the patched module intact. To explore more on patch-package, visit their official repository.

---

Pursuing Top Quality

In web development, we always aim for the highest quality, both in coding and design. But sometimes, even the best tools have some flaws.

Take the astro_embed library, for example. It’s a great tool that lets us embed videos from sites like YouTube or Vimeo into Astro’s mdx files. However, I noticed an issue with the thumbnail quality.

YouTube often uses this hqdefault .jpg thumbnail:

But there’s a better quality version, hq720.jpg:

The second one clearly looks better. However, astro_embed uses the first one by default. So, I decided to tweak the library to use the better-quality thumbnail.