App keeps refreshing with log: `Server connection lost polling for restart`

Describe the bug

In certain situation the app keeps refreshing indefinitely giving this log in console: server connection lost polling for restart.

I’m using vite 2.4.2 with https, react and typescript.

Reproduction

I noticed this happen in this 2 situations:

1. Using Brave with a CORS extension enabled on the page (in my case is CORS Unblock). Weirdly using Chrome with the same Chromium version and same extension doesn’t cause the problem
2. Running vite with the --host flag and accessing it with my phone (Safari on iOS 14) via the shared url: https://192.168.1.xxx:3000. Removing the https option “solves” the problem on iOS.

System Info

System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 808.27 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
Binaries:
    Node: 14.17.3 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
Browsers:
    Brave Browser: 91.1.26.74
    Chrome: 91.0.4472.114
    Firefox: 88.0.1
    Safari: 14.1.1

Used Package Manager

yarn

Logs

No response

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.

[aflansburg]

I experienced this same issue when building with docker. In the container my app runs on port 3000, however, as I have another app running on that port on my local I am using 3001 as my host port. From my docker-compose.yml for my Svelte+Vite app:

  web-frontend:
    build:
      context: ./svelte-vite-frontend-dock
      dockerfile: Dockerfile
    volumes:
      - ./svelte-vite-frontend-dock:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - 3001:3000
      - 24678:24678

Clues above in posts regarding people using reverse proxies made me realize that I needed to add this to my vite.config.js file:

server: {
    hmr: {
      clientPort: 3001,
    },
  },

This immediately fixed my issue.

[FossPrime]

In CodeSandbox traffic is routed to port 3000 from an SSL proxy on port 443. Vite will by default look for port 3000, instead of port 443. The only configuration needed to make it work was changing the HMR port.

server: {
    hmr: {
      port: 443
    }
  }

Working codesandbox: https://codesandbox.io/s/vite-hmr-fix-4259-h6c2l?file=/vite.config.ts:180-227