Restarting tsserver when node_modules changes, ie; when using npm link

Question

When working on an npm package it's convenient to use npm link for local development.

Preamble

For example, assuming the following folder structure:

/lib
/consumer

An npm package "lib" would be in /lib, and npm link . makes it available for linking. Then, from /consumer, running npm link lib installs the in-development lib package. In /lib I'd then run a build:watch command to continually rebuild/transpile the library into js + .d.ts files, and from /consumer I'd be using a Hot-Module-Reloading system such as Vite.

During development I would continually switch back and forth between /lib and /consumer. This works great. I can make changes in either place and the HMR system refreshes the web-app.

However, whenever I make changes in /lib this throws the TypeScript server in VSCode. I'll get warnings that the exports for the imported, linked-module are no longer available, and red-underlines abound.

Question

Running "TypeScript: Restart TS server" from the command-palette fixes the problem every time, so I guess my question is: How can I get the TS server to restart itself automatically in a situation like this? I'm assuming it just needs to know when node_modules changes because of the updated linked-library?

Answer 1

When you build the /lib directory, files inside node_modules get deleted. This means you'll need to restart VS Code's TS server. The good news is VS Code is working on an automatic TS restart feature. You can see more about it in this GitHub issue.

Meanwhile, you can try out this VS Code extension. After installing, just specify the files it should watch. For a setup like mine with turborepo and sub-packages, this pattern worked:

**/packages/lib/dist/**/*.{ts}