Note: Make sure you're on Windows
git clone https://github.com/thecrypticace/vite-windows-hmr-bug
cd app
npm install
npm run dev
- Try editing any of the
.vuefiles - On the initial run you'll notice that three of the files in dir-1 don't reflect any template changes through HMR. You must reload the page.
- Stop the dev server
- Rerun the dev server
- You'll notice that two of the files in
dir-1don't reflect any template changes through HMR.
- The files that do not work reside outside of the
vites current working directory. - A file (e.g. CSS file in this case) must be processed by a plugin.
- That plugin tells Vite to watch these files for changes by using
addWatchFile.
The real world case I encountered this in involved a monorepo where Vue files were loaded from a shared package that wasn't in the same directory tree as the Vite project but a couple of directories up.