Vite does not rebuild when linked dependency changes

[fbontin]

Hello everyone! I'm hoping to get some help with an issue. It's a bit complicated, so I'll try my best to explain it.

We have three different repositories in my project:

• frontend - a web application, using vue and vite
• component - one repository containing a large vue component. Built using vite. The frontend imports this package.
• common - a monorepo style repository, containing many small packages. Not using vite to build, only using tsc. The frontend also imports packages from here

All these repos also use Yarn (version 4 and PnP). In order to test changes in multiple repos at the same time, we use yarn link (docs). This allows the frontend repo to use a local package instead of one published to npm.

So when starting the frontend repo locally, it usually looks like this:

1. Build the component using vite build --watch
2. In the frontend, run yarn link ../component so that the frontend uses the local version of the component
3. Start the frontend using just vite

After having done this, any changes made in the component (changing the text somewhere, updating a color) is NOT registered by the running vite instance in the frontend. So the expected behaviour I want is that whenever the component is rebuilt, the frontend instance of vite detects that change and rebuilds.

However, if doing the same with a package in the common repository, then vite registers the changes in the dependency reloads (using HMR) so that those changes appear in the browser.

I have tried using optimizeDeps but I haven't had any luck with it so far. It is not needed for the common repository to work.

Does anyone have any clue what could be going wrong here? Or any direction for me to look in? Or any thoughts to why this works for common but not for component?

EDIT: I have a minor breakthrough, and maybe it is yarn link that is the culprit. For some reason, the linking works differently for the two repos. When printing logs in vite, one points to a local file and another points to node module:

  vite:resolve 1.21ms component -> /home/username/frontend/.yarn/__virtual__/component-virtual-a8e467f277/2/component/dist/index.js +0ms

  vite:resolve 3.91ms common/some-package -> /home/username/common/packages/some-package/dist/index.js +0ms

[wesleysmyth]

This is a common issue with linked packages, especially combined with Yarn PnP. A few things to check:

1. Vite's file watcher doesn't see linked packages by default

Vite uses chokidar for file watching, and by default it only watches files within your project root. Linked dependencies resolve to paths outside the project, so changes aren't detected.

Add the linked packages to the watch scope:

// vite.config.ts
export default defineConfig({
  server: {
    watch: {
      // Watch linked package directories
      ignored: ['!**/node_modules/@your-org/**'],
    },
  },
});

2. Exclude linked packages from dependency optimization

Vite pre-bundles dependencies with esbuild for performance. Linked packages get pre-bundled once and then cached, so subsequent changes aren't picked up:

export default defineConfig({
  optimizeDeps: {
    exclude: ['@your-org/component', '@your-org/common'],
  },
});

This forces Vite to load these packages fresh on every request in dev mode.

3. Yarn PnP complications

With Yarn PnP, there are no node_modules symlinks — packages resolve through .pnp.cjs. This can confuse Vite's watcher. Two options:

• Use nodeLinker: node-modules in .yarnrc.yml for the frontend workspace (simpler)
• Or ensure the resolved paths from PnP are included in the watch scope

4. The common repo (tsc-only) needs special attention

Since common is built with tsc and not Vite, changes there require a rebuild of the TypeScript output. Make sure you're watching the output directory (e.g., dist/), not the source. Or better yet, configure the frontend's tsconfig.json to reference the common project directly using TypeScript project references, and let Vite handle the TS compilation.

The combination of all three fixes (watch scope + optimizeDeps.exclude + proper PnP handling) should get live reload working across all your linked repos.

[fbontin]

Thank you for the reply!

For 1, we're using Yarn PnP, so we don't really use node_modules, so this one didn't help

For 2, this one didn't help either, not sure why.

For 3, I would love to switch from pnp and instead use node_modules, but it is not possible at this point in my project, unfortunately.

For 4, maybe I was unclear when I wrote the text above, but we don't currently have an issue with the common repo, so no need for a fix :-)

If someone has the same issue as me, I have found a pretty hacky solution. I will be using this since I'm not able to get something better working. It's using vite-plugin-watch-and-run and touch packages, to trigger a rebuild by tricking vite that the config has been changed. Not a good solution, but it helps out for now.

watchAndRun([
      {
        name: 'Rebuild when component changes',
        watch: path.resolve('../component/dist/index.js'),
        run: "yarn node -e \"require('touch')('vite.config.ts')\""
      }
    ])