How do I use Vite with Yarn Workspaces?

Question

At my workplace we were trying to get Vite working with Yarn Workspaces (in yarn v2).

We wanted to create a test environment where we consumed one of the packages we were publishing from the same repository but a different workspace. To illustrate:

packages
   package-a
   package-b

The packages are referred to in the main package.json like so:

{
  ...
  "workspaces" : [
    "packages/package-a",
    "packages/package-b"
  ]
  ...
  "packageManager": "[email protected]"
}

Where package-b refers to package-a in package-b's package.json like so:

{
  ...
  "dependencies" : {
    ...
    "package-a-name-in-npm": "workspace:packages/package-a"
    ...
  }
  ...
}

What we found though, was that when it came to running the application in Vite, the package was not being loaded into the browser. This resulted in errors like:

Uncaught SyntaxError: The requested module ... does not provide an export named ...

At runtime only, but TypeScript and ESLint were perfectly happy with our imports.

See my answer below to find out our solution.

Pd

Answer 1

Yarn uses symbolic links to link to local workspaces. Vite doesn't seem to handle this well out of the box.

By setting the preserveSymlinks option in vite.config.ts, we were able to resolve this.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    preserveSymlinks: true // this is the fix!
  }
});

Pd

Setting this option will prevent vite from being able to load hoisted packages from node_modules (in parent folders). It will break your entire app. How can this be a fix? – Faliscan

@Faliscan are you speculating or has this broken things for you? Because for us this solution has worked without issue and we have node modules folders at multiple levels. – Pd

It broke my project entirely. was having issues with unresolved dependencies that just went away after removing this setting. What OS are you on? I use MacOS. – Faliscan

We use all of them. I use Windows, tow of my colleagues use MacOS and we build these projects in Docker containers (so Linux). All of them work without issue. Well, none related to this anyway. – Pd

I am running out of ideas then. I tried removing my downvote but can not. Sorry. – Faliscan

No worries mate. Best of luck with your technical issues. – Pd

Although this does make vite able to find the local package, I'm still running into issues when updating my local dependencies. These are not picked up by vite. – Peridot

@Peridot If you are using typescript, make sure that the changes to your local dependency are being recompiled as you make them. One way to do this is to run tsc --watch instead of just tsc in your dependency when in development. – Pd

Yes, I have this running, but the changes don't get picked up, only after I restart with yarn dev --force – Peridot

Thank you @Peridot ! I'm also having this issue. Clearing node_modules also "works". – Dire

@HendyIrawan I solved this by moving to pnpm workspaces. Works like a charm. You don't even need to compile your typescript packages. – Peridot