vitejs / vite

Next generation frontend tooling. It's fast!
http://vitejs.dev
MIT License
66.85k stars 6k forks source link

HMR not working on WSL2 #16634

Closed rbutera closed 3 months ago

rbutera commented 3 months ago

Describe the bug

This issue occurs in any fresh vite app (npm create vite@latest) on Windows Subsystem for Linux 2.

If I update the file _index.tsx, I get the following output in terminal:

13:57:46 [vite] hmr update /src/App.tsx

Interestingly, in the browser console, I CAN(!) see the following message:

[vite] hot updated: /src/App.tsx

However is no change to the browser contents at all. If I refresh the page manually then the changes are propagated as expected.

There is no error message in the browser console.

Out of curiosity, I have checked the Next.js dev server which works as expected.

I have tested the exact same repo on MacOS (same node.js version) and HMR works as expected in that environment.

I have tried setting server.hmr.host to both 127.0.0.1 and localhost in vite.config.ts but this does not fix the problem. usePolling also has no effect, I suspect because a file change IS detected.

Related Issues

Issue #5878

Please note this is not a duplicate of #5878 despite the same title. The project is NOT in the windows filesystem, it is in the linux filesystem.

Issue #12142

The response by @sapphi-red in #12142 is also not relevant. Vite detects a file change.

Reproduction

https://stackblitz.com/edit/vitejs-vite-yfza6z?file=index.html

Steps to reproduce

use wsl2

System Info

System:
    OS: Linux 5.15 Pengwin 12 (bookworm)
    CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
    Memory: 12.66 GB / 15.48 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.3 - ~/.asdf/installs/nodejs/21.7.3/bin/node
    Yarn: 1.22.22 - /home/linuxbrew/.linuxbrew/bin/yarn
    npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.0.6 - ~/.asdf/installs/nodejs/21.7.3/bin/pnpm
    Watchman: 2024.03.18.00 - /home/linuxbrew/.linuxbrew/bin/watchman
  npmPackages:
    @vitejs/plugin-react-swc: ^3.5.0 => 3.6.0
    vite: ^5.2.11 => 5.2.11

Used Package Manager

pnpm

Logs

No response

Validations

stackblitz[bot] commented 3 months ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

rbutera commented 3 months ago

Nevermind. Turns out it was Adguard filtering out loopback connections in localhost.

In adguard settings, go to advanced settings and then disable Filter localhost