debugging tips for pnp

[bdwain]

In the past, I would often debug issues I had with dependencies by inspecting and sometimes editing node modules directly (such as adding console.log statements). This was always a helpful way to understand what my scripts were doing under the hood and has been a useful way to fix many issues in the past.

My biggest concern about migrating my project to pnp is that that seems like it will be much more difficult going forward, since all of the dependencies are in zip files instead.

Are there common practices/tools to help debug node modules when your project uses pnp?

[paul-soporan]

By having the ZipFS extension installed, you'll be able to click on symbols to go to definition inside the archives and you'll also be able to right-click on an archive to mount it. Once you're inside a file, you'll be able to edit and save it and PnP will use the modified version.

Yarn will also throw a CACHE_CHECKSUM_MISMATCH error on installs if you edit an archive and forget to revert it. You can then run YARN_CHECKSUM_BEHAVIOR=reset yarn to have Yarn fetch the archive again.

You can also do yarn unplug -AR '**/*' to unplug everything for local development and then revert those changes before you commit (we've discussed about having a way for yarn unplug not to persist the changes, but there are some technical challenges currently IIRC).

Finally, if you still consider the editor experience subpar, you can continue using node_modules locally (until editor experience with PnP improves even more) but you can use PnP on CI for faster install times and enforcing strict dependency boundaries.

[merceyz]

You can then run YARN_CHECKSUM_BEHAVIOR=reset yarn to have Yarn fetch the archive again.

Once we get around to implementing it that is, for now you have to manually delete the entry in question

[bdwain]

this is super helpful! Thanks!

[mattste]

I'm curious if there is a better approach for a dependency that requires a build step. For example, I tried to debug Vite locally. It has a bundling step. I tried to run yarn install in the package to set-up their dev environment to rebundle my changes but isn't set-up for pnp. Running yarn set version 1.22.11 in it also changes the version used in my parent package.json to 1.22.11. Any workarounds?

[merceyz]

I'd suggest cloning their repo and make changes there then connect them together using yarn link /path/to/vite