Debugging Local Packages with pnpm link

If you’re tired of copy-pasting your local library into your app or publishing endless pre-release versions just to test a small change, there’s a better way.

pnpm link lets you connect your local package to your app, so you can debug and test changes without extra hassle.

Meet the Cast

Picture this:

• cool-package/: a opensource package your working to contibute to because you trying to fix a bug.
• my-app/: The app that uses that package.

cool-package/
├── src/
│   └── index.js
└── package.json

my-app/
├── src/
│   └── main.js
└── package.json

Your my-app/package.json might look like this:

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "@cool/package": "1.0.0"
  }
}

But you want to test changes in @cool/package without publishing it every time. Here’s how to use pnpm link.

The Two-Step Process

1. Link the package globally:

   cd @cool/package
   pnpm link --global
   

2. Link it into your app:

   cd ../my-app
   pnpm link --global @cool/package
   

   
   Now, your app uses your local version.

Debugging

• Edit code in @cool/package.
• Run or debug my-app.
• If you need to build your library, run your build command.

Unlink When You’re Done

To go back to the registry version:

1. In my-app:

   pnpm unlink --global @cool/package
   pnpm install --force
   

2. In @cool/package:

   pnpm unlink --global
   

Summary

pnpm link is a useful tool for local package development. Its makes stepping into the code with breakpoints and debugging a breeze. PNPM docs on link for more details.