Skip to content

Latest commit

 

History

History
28 lines (20 loc) · 967 Bytes

File metadata and controls

28 lines (20 loc) · 967 Bytes

Vite Windows HMR Bug

Note: Make sure you're on Windows

Steps

git clone https://github.com/thecrypticace/vite-windows-hmr-bug
cd app
npm install
npm run dev

Notes

  • Try editing any of the .vue files
  • 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-1 don't reflect any template changes through HMR.

The setup

  1. The files that do not work reside outside of the vites current working directory.
  2. A file (e.g. CSS file in this case) must be processed by a plugin.
  3. 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.