I’m using npm workspaces with Vite in a svelte project (using SvelteKit).
The architecture of my project looks like this :
- apps/
- project-a/
- package.json
- vite.config.ts
- packages/
- common-lib-a/
- package.json
- vite.config.ts
- package.json
My project-a has common-lib-a/ listed as a dependency in its package.json (with: “@namespace/common-lib-a”: “^0.0.1”).
Its vite.config.ts looks like this :
import { sveltekit } from '@sveltejs/kit/vite';
import dns from 'dns';
import Icons from 'unplugin-icons/vite';
import { defineConfig } from 'vite';
import { purgeCss } from 'vite-plugin-tailwind-purgecss';
const hash = Math.floor(Math.random() * 90000) + 10000;
dns.setDefaultResultOrder('verbatim');
export default defineConfig({
plugins: [
sveltekit(),
purgeCss(),
Icons({
compiler: 'svelte'
})
],
resolve: {
preserveSymlinks: true,
dedupe: ['@namespace/common-lib-a']
},
optimizeDeps: {
exclude: ['@namespace/common-lib-a']
},
build: {
rollupOptions: {
output: {
entryFileNames: `[name]${hash}.js`,
chunkFileNames: `[name]${hash}.js`,
assetFileNames: `[name]${hash}.[ext]`
}
}
}
});
In order to run project-a, I use a daemon that re-builds common-lib-a each time it detects changes in common-lib-a (with vide build), and I run project-a with vite dev.
Here’s the script part of the root package.json (build and dev commands are vite build/vite dev scripts):
"scripts": {
"dev-project-a": "npm run build -w @namespace/common-lib-a && npm run dev -w @namespace/project-a",
"watch-project": "nodemon -x 'npm run dev-project-a' -e svelte,js,ts,json --watch packages/common-lib-a/src",
}
But still, it seems like Vite has a cache for common-lib-a, which results in changes not appearing unless I clear all of the cache in my browser for any modifications in common-lib-a, when running project-a.
Is there a way to solve this ?