Using Vite with linked dependencies

Pontus Lundin — Fri, 12 Mar 2021 11:13:39 +0000

TLDR
Use the Vite config option optimizeDeps.exclude when working with linked local dependencies 👍

The other day I was gonna take a look at a Svelte issue and thought I'd try out Vite at the same time.

Setup

I start by linking my fork of Svelte and run it in dev mode so it will automatically update.

# svelte-fork
npm link
npm run dev

In my test project, I configure Vite to transpile svelte-files, which was really smooth since it supports rollup-plugins. Then I link Svelte and start it in dev mode.

# test-project
npm link svelte
npm run dev

I start making changes in my fork of Svelte and expect the changes to be reflected in the test-project but nothing happens. Inspecting the node_modules folder shows that the changes are there but in the sources-panel of Chrome nothing has changed.

I restart Vite but nothing changes.

So I bring out the big guns and run:

rm -rf node_modules
npm install
npm link svelte
npm run dev

A simpler approach to this 👆 is to remove node_modules/.vite where Vite keeps the pre-bundled files.

And finally, I can observe my changes. But this is not very smooth.

Then I take a look at the Vite config documentation where I find the optimizeDeps.exclude option that tells Vite which dependencies NOT to pre-bundle, and yes, we have a winner 🥳

export default {
  // ...
  optimizeDeps: {
    exclude: ['svelte']
  }
}

And let me tell you - this works like a charm and I'm finally back to the smooth side of things 😎

DEV Community: Pontus Lundin

Using Vite with linked dependencies

Setup