node-modulesviteyarn-workspaces

Yarn workspace dependency isn't updated in vite cache

TLDR: Vite is not updating workspace dependencies in the node_modules/.vite cache.

I am running a vite server locally and use yarn workspaces to organise my project.

My (simplified) directory:

web/              # @my_app workspace
  frontend/       # @my_app/frontend workspace
    App.tsx
    node_modules/
      .vite/      # the vite cache
  backend/
  shared/
    foo.ts

In the frontend I use constants defined in shared/foo.ts.

If I define a new constant export const bar = 1 in foo.ts, try to import it from App.tsx, and run vite locally, I get the following error:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@my_app_foo.js?v=cccdb61c' does not provide an export named 'bar' (at App.tsx)

Indeed, if I check the file /node_modules/.vite/deps/@my_app_foo.js, I can see it's not updated with my latest changes.

How do I make vite update the cached dependency when I make changes?

Note: The concerned dependencies don't change very often, so they don't need to be hot-reloaded on update (just need the cache to be up-to-date when I run vite).

Solution

  • Vite prebundles dependencies and caches them locally in node_modules/.vite/deps.

    There are two ways to force vite to rebundle the workspace dependency every time:

    1. vite --force. This will update the bundled dependencies in node_modules/.vite every time you run vite locally (and the deps will be in node_modules/.vite/deps_temp instead of deps).
    2. In vite.config.js, configure the bundle optimisation:
    export default defineConfig({
  optimizeDeps: { exclude: ['@my_app'] },
  // ...
});

    This will exclude the @my_app workspace content from the node_modules/.vite cache.

    Both solutions worked for the issue I was facing.