HMR not working in WSL2

[SuperstringDev]

Describe the bug

After installing the Vite Vue Template under the WSL2 home dir HMR does not work. The only way to see changes in the page loaded by NPM RUN DEV is to save the file, which then refreshes the page. In comparison, the online example at Stackblitz will refresh with every change without needing to first save the file.

When testing with the --debug flag only the first change was refreshed on a save and subsequent changes and save had no result. All I'm doing is changing a few letters to test that Vite works and it is not working as expected.

Reproduction

There are a few past issues that seem to face a similar problem. After trying any suggests those dated issues made the HMR still does not work on my setup.

System Info

I'm running Windows 11 with WSL2 and Ubuntu 20.04 and using the Brave browser. The command I use to start a Vite project is the following one, taken directly from the guide.

npm init vite@latest my-vue-app -- --template vue

Used Package Manager

npm

Logs

star@drive:~/pack/vite-vue$ npm run dev --debug

> vite-vue@0.0.0 dev
> vite


  vite v2.6.14 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 339ms.

2:19:27 PM [vite] hmr update /src/App.vue

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[casret]

My patch #5617 probably addresses this.

[sodatea]

See https://vitejs.dev/config/#server-watch

When running Vite on Windows Subsystem for Linux (WSL) 2, if the project folder resides in a Windows filesystem, you'll need to set this option to { usePolling: true }. This is due to a WSL2 limitation with the Windows filesystem.

[SuperstringDev]

@sodatea

"When running Vite on Windows Subsystem for Linux (WSL) 2, if the project folder resides in a Windows filesystem, you'll need to set this option to { usePolling: true }."

This is talking about if your project folder is on the Windows side not the Linux side. In my case I'm following the recommendation of WSL2 and VSCode and have my projects located under my Linux root. This make everything very performant.

Still need a solution to the bug I posted.

[sodatea]

So the file system watcher works but the browser doesn't update?
Any errors in the browser console?

[sodatea]

I'm not familiar with WSL2, but it could be a network issue given that 2:19:27 PM [vite] hmr update /src/App.vue was logged to the terminal, meaning the component was successfully updated but not delivered to the browser.

[SuperstringDev]

Your right, the HMR update was logged to the terminal but only each time I saved the file. There was no automatic update to the browser between saves.

Here is what the browser console outputs:

client.ts:22 [vite] connecting...
client.ts:52 [vite] connected.
2 client.ts:348 [vite] hot updated: /src/App.vue

The last line updates each time I save the file, same as the terminal does.

​

[sodatea]

Oh, that's expected. Vite can't access the in-editing content in your editor.
You need to enable the auto-save feature in your editor (StackBlitz does this by default).

For example, in VS Code, it's:

[SuperstringDev]

That was the solution, thanks for your help. You might like to mention this in the docs as well, since I always look there for possible solutions first.