Vite keeps refreshing the page with logs stuck in connecting

[PrinceRajRoy]

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.

[779235394]

I have encountered a similar problem. After using the proxy, the vite connection will be lost. Use HMR to specify the address. You can try it
server: { port: 3000, https: true, hmr: { host: 'yourhost.local', port: 3001, protocol: 'wss' } } }

[mmarchois]

Same problem with sveltekit. Note that the production build works.

[ygj6]

The replication you provided, everything works fine with me, try the codesandbox you provided again, if it works, please provide a link to a repository that can replicate this issue.

[ygj6]

Sorry, I had this problem when I tried again myself, I will look into it.

[andrewbanchich]

I'm having this issue as well, but I'm not sure if I'm just configuring something incorrectly.

I'm using a reverse proxy (ORY Oathkeeper) which does TLS termination and trying to run SvelteKit's dev server in a Docker container. The site loads in the browser, but I'm seeing the same [vite] server connection lost. polling for restart... client.ts:225:10 messages.

My svelte.config.js:

  kit: {
    target: '#svelte',
    vite: {
      server: {
	hmr: {
	  host: 'mydomain.org',
	  port: 443,
	  protocol: 'wss'
	}
      }
    }
  }

I feel like I've gone through every permutation of this config and Oathkeeper's to try to get this working, and have had no luck.

It's not clear to me what the correct configuration of everything should be. What I want is for SvelteKit / Vite to be listening behind Oathkeeper, not aware of TLS at all.

Should server.hmr.protocol be ws or wss? Even with ws set, the browser will use wss.

Is server.hmr.host only something you set when having Vite take care of HTTPS? If so, how can I tell Vite to make a client-side request to mydomain.org but that the server should simply listen on 0.0.0.0?

I've also found a server.hmr.clientPort config option which I've had no success with in getting this working.

[jsjoeio]

@andrewbanchich Did you ever find a solution?

[andrewbanchich]

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

[lubomirblazekcz]

same issue, I'm trying to run vite on remote server on different url, vite itself runs on localhost:3000 over https

[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.

[bluwy]

I think the core issue is the same as #4259. Let's keep the conversation there.