Vite keeps refreshing the page with logs stuck in `connecting`

Describe the bug

Vite keeps refreshing the page and logs are stuck with connecting... server connection lost. polling for restart...

Reproduction

Here is the codesandbox of the official react template package. This one is stuck while I was trying (image above).

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
    Memory: 7.89 GB / 15.85 GB
  Binaries:
    Node: 16.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Users\Prince~1\AppData\Roaming\npm\yarn.CMD
    npm: 7.11.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 92.0.4515.107
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.62)
    Internet Explorer: 11.0.19041.1

Used Package Manager

npm

Logs

[vite] connecting... 
[vite] server connection lost. polling for restart...

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.

[lubomirblazekcz]

Ok, I’ve managed to resolve it for myself. I’ve had to define host where vite is running, because by default it’s taken from window.location.hostname, so that’s why it never connects.

hmr: {
    host: 'localhost'
}

[nickbien]

@jsjoeio Yes, this config got it working for us.

thanks! clientPort did the trick for me.