Hot Module Replacement not working with default svelte project on wsl2

Question

Following the instructions on the docs

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

I created and ran a svelte project on wsl2. The project was created and the server ran properly but, HMR was not working.

Answer 1

After a long time spent bashing my head on the keyboard I found out that vite is unable to detect file changes in wsl2

So I just installed node on windows and created then ran the project through cmd and every thing was fine

Answer 2

I got it to work by creating the project in a "native" WSL directory instead of a mounted Windows directory, then using the WSL path in my IDE running on Windows.

For example:

1. Place the project in ~/projects/my-app instead of /mnt/c/projects/my-app (C:\projects\my-app).
2. In your IDE, use \\wsl.localhost\Ubuntu\home\<user>\projects\my-app.

Answer 3

This is a well-known problem (and admittedly hard to find more info about when you don't know what to search for but the symptoms you get), and it all comes down to that file system events on Windows aren't propagated to Linux applications running in Docker (or something like that):

https://github.com/microsoft/WSL/issues/4739

Work-arounds are:

• Preferred work-around
  Place your project folder on the file system for the WSL2 Linux distribution you are using. If you use VS Code as your code editor, you can edit your files just as easily as if they would have been stored on the Windows file system
• Alternative work-around
  Keep your project folder on the Windows file system, and instruct your Linux applications running in Docker (such as Vite) to poll the Windows file system every second or so to check for file changes (this is wasting quite a lot of resources, so better to go with the first solution if possible)