Vite "project references" for running the dev server with on-demand build & HMR for dependency Vite library projects

[segevfiner]

To each development in a monorepo. TypeScript has a project references feature that allows it to automatically orchestrate the watching and cross project type checking inside a monorepo.

When using Vite in a monorepo with both library and an app project, you will lose the on-demand compilation & HMR that makes Vite so fast for the library code by default as you will need to use vite build to build the library for the app dev server to pick it up. You can use an alias, but you are then building the library code like it was part of the app code and no longer in isolation, this means it won't use it's project configuration appropriately and you must carefully tailor the app build configuration to make it compatible for it to build correctly.

It would be cool if Vite had a dedicated feature for this in a similar style to TypeScript's project references that allows for vite dev to handle both the app and library projects with full on-demand compilation & HMR, proper handling of the configuration of the libraries vs app configuration and so on.

e.g. vite.config.ts:

import { defineConfig } from 'vite'l

export default defineConfig({
  references: [
    { path: "../packages/ui" }
  ]
});

And Vite will take care of the rest.

The Vite scenario for such a feature is a both more unique and needed than TypeScript project references which can also be resolved by an external orchestration solution, as Vite does on-demand compilation in dev mode which is not something that can be handled in an external tool when there is more than one project for Vite to handle.

[AbaoFromCUG]

Related to evanw/esbuild#1250

bundler(like esbuild) not full implement tsconfig.json's features

[ghiscoding]

Did anyone ever figure out how to fix this? At the moment what I'm doing is to prebuild once and then run a watch with normal build, so it's building twice and the startup is slower but at least I'm able to work. I hope that eventually I could find a way to avoid doing this prebuild if someone has a better setup, please share.

[cdauth]

Not sure if my setup is the same as yours, but in my tsconfig.json under compilerOptions.paths I have defined path aliases for the package names of my internal dependencies that point to the entry point TypeScript files of those dependencies. This way importing those packages will import their TypeScript sources instead of their JavaScript bundle, so when I make changes to those packages, they are picked up without me having to rebuild the packages. In my vite.config.ts I had to add the vite-tsconfig-paths plugin as tsconfigPaths({ loose: true }).

This setup does not give me incremental builds (so if multiple vite projects depend on the same internal package, each of them builds it separately rather than reusing the compiled files, but it gives me a much better dev experience because I don't have to build any bundles for the dev server to pick up the changes.

[ghiscoding]

thanks for the reply, though I do wish to eventually find a good setup with project references and incremental builds

[cdauth]

Reading your message again, I'm actually not sure I understand the problem you are facing.

As far as I understand, the OP wants have on-demand compilation for libraries within the monorepo, in order to avoid having to run vite build each time when making changes to a library. This behaviour can be achieved with the setup that I described, but it would of course be nicer if Vite provided this feature out of the box, as the OP requested.

But I don’t understand why in your case you have to build your project twice.

[ghiscoding]

ah yeah you're right, I have multiple project and the one I need to do a prebuild isn't using project reference. I'll give a shot to your approach, thanks for posting

[aburkowsky9]

this can get EXTREMELY slow in a monorepo as it grows.