kit: Overriding HMR port with `vite.server.hmr.port` no longer working

Describe the bug

If you specify the Vite config server.hmr.port to override the port that the websocket connection for HMR uses, Vite dev runtime code in the browser attempts to connect to this port but the connection fails, triggering repeated refreshes of the page.

Reproduction

From the starter template, add

vite: { server: { hmr: { port: 3001 } } }

to your svelte.config.js to set the https://vitejs.dev/config/#server-hmr setting.

Open the browser and look at the console and network tab.

Logs

[vite] connecting... client.ts:22:8
<Routes> received an unexpected slot "default". index.mjs:1983:20
Firefox can’t establish a connection to the server at ws://localhost:3001/. client.ts:28:15
[vite] server connection lost. polling for restart...

System Info

Node 17.2.0
Firefox 95.0

  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.3
    @sveltejs/kit: next => 1.0.0-next.201
    svelte: ^3.44.0 => 3.44.2

Severity

blocking an upgrade

Additional Information

This used to work, although I haven’t chased down which version this broke in. (This would be inconvenient to do, because of all the other intended breaking changes that Kit has had in the past months.) The first place I’m going to look is the #1517 stuff though.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 16 (13 by maintainers)

Most upvoted comments

SvelteKit and the Vite plugin depend on ^ semver ranges of Vite, so you should be able to get your package manager to just update Vite without upgrading SvelteKit, if you want to try this fix without doing the other changes that updating SvelteKit will require.

Conduitry on Mar 31, 2022

The following worked for me. Use clientPort, not port.

kit: {
	adapter: adapter({
		fallback: "200.html"
	}),
	prerender: {
		enabled: false
	},
	ssr: false,
	vite: {
		server: {
			hmr: {
				clientPort: 7231
			}
		}
	}
}

JandosKh on Jan 2, 2022