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": "yarn@3.3.1"
}

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.

score 5 · Accepted Answer · answered Feb 14 '23 at 17:48

5

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!
  }
});

answered Feb 14 '23 at 17:48

Armand Bernard

449
1
3
12

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? – bennidi Jul 03 '23 at 10:12
@bennidi 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. – Armand Bernard Jul 04 '23 at 11:16
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. – bennidi Jul 04 '23 at 14:07
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. – Armand Bernard Jul 05 '23 at 19:51
I am running out of ideas then. I tried removing my downvote but can not. Sorry. – bennidi Jul 07 '23 at 12:52
No worries mate. Best of luck with your technical issues. – Armand Bernard Jul 08 '23 at 13:54
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. – wvdz Aug 09 '23 at 13:16
@wvdz 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. – Armand Bernard Aug 11 '23 at 10:49
Yes, I have this running, but the changes don't get picked up, only after I restart with `yarn dev --force` – wvdz Aug 21 '23 at 13:18

How do I use Vite with Yarn Workspaces?

1 Answers1