HMR indefinitely reloads on startup after upgrading to 1.0.0-next.169

[techniq]

Describe the bug

Upgrading from 1.0.0-next.168 to 1.0.0-next.169 onward causes an infinite reload cycle on startup.

I believe the issue is from the Vite HMR config no longer working / being passed after this PR. Might also be a similar issue as what was resolved in 0f06e35

I run a dotnet backend with SSL on https://localhost:5443 and needed this configuration to allow the proxy to http://localhost:3000 to work.

const config = {
  kit: {
    vite: {
      server: {
        hmr: {
          protocol: 'ws',
          port: 3001,
        },
      },
    },
  },
};

What's interesting is if I remove the hmr config above, accessing the Vite server directly at http://localhost:3000 does not reload indefinitely, but if I leave the config in place, http://localhost:3000 also indefinitely reloads on startup.

Reproduction

https://github.com/techniq/sveltekit-hmr-reload-issue

Logs

No response

System Info

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
    Memory: 146.43 MB / 16.00 GB
    Shell: 5.6.2 - /usr/local/bin/zsh
  Binaries:
    Node: 14.14.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 7.4.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 94.0.4606.61
    Chrome Canary: 96.0.4656.0
    Firefox: 80.0
    Safari: 15.0
    Safari Technology Preview: 14.2

Severity

blocking an upgrade

Additional Information

No response

[moisesbites]

Please, use port 443 and wss protocol.
#1134 (comment)
vitejs/vite#1653 (comment)

[techniq]

@moisesbites - Thanks. In my case the port should be 5443 since that is what I have running locally. I'm not even sure how it ran with port 3001 on version 168. Maybe SvelteKit was launching another server on that port... anyways, this is the config that now works and allows me to upgrade.

const config = {
  kit: {
    vite: {
      server: {
        hmr: {
          protocol: 'wss',
          port: 5443,
        },
      },
    },
  },
};

[moisesbites]

For version "@sveltejs/kit": "^1.0.0-next.178", maybe you will need to put '--host 0.0.0.0' in the scripts in package.json:

  "scripts": {
    "dev": "svelte-kit dev --host 0.0.0.0",
    "start": "svelte-kit start --host 0.0.0.0",
    "preview": "svelte-kit preview --host 0.0.0.0",
    ....
   }

#1134 (comment)

[gyurielf]

Okay, finally I found the trick.

So I don't even know how it works before version next 169..
But if you use a reverse proxy and/or containers to run SvelteKit
The ports it should be same (in my case at least) with the SvelteKit running port.
In my case in the docker it's run on the port 3000, and map to 3001 host port and i have a reverse proxy in front of it, and runs on port 80 and pass to 3001.

This config solved the problem for me. (http)

        vite: {
            server: {
                hmr: {
                    // Internal port (in container same as sveltekit port).
                    port: 3000,
                    // External port (Docker host)
                    clientPort: 3001
                }
            }
        },