Vite Reload Loop

Question

I am trying to finish a migration away from Parcel and into Vite. We use caddy to reverse proxy a custom domain locally through a Docker container. The issue I'm having is that when I load the client in browser it continuously refreshes, the console saying that vite is connecting, then "server connection lost, polling for restart" in a loop.

Here is the vite.config.json:

// @ts-ignore
import tailwindcss from "@tailwindcss/jit";
import react from "@vitejs/plugin-react";
// import reactRefresh from "@vitejs/plugin-react-refresh";
// @ts-ignore
import dotenv from "dotenv";
// import postcssImport from "postcss-import";
import presetEnv from "postcss-preset-env";
import { defineConfig } from "vite";

// export default (() => {
// Object.assign(process.env, loadEnv("", ".."));
// dotenv.config({ path: "../.env" });
// now you can access config with process.env.{configName}

export default defineConfig({
  server: {
    host: "0.0.0.0",
    // hmr: false,
    port: 1234,
  },
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        tailwindcss,
        presetEnv({ stage: 1 }),
      ],
    },
  },
});
// });

I've pull the container logs and don't see any crashes reported. I've tried toying with the config but to no real effect.

I'm trying to get HMR working via Docker and I can see the same problem you are having. It is not able to reach the HMR host and reloads the page. If you uncomment your `hmr` line there then you'll see it stops trying to do HMR and therefore stops failing and doesn't restart as a consequence (but you don't get HMR either). In theory if you fix the HMR access issue then you should solve it and retain HMR. Good luck. — ABCD.ca, Feb 21 '22 at 07:44

score 7 · Answer 1 · answered Apr 07 '22 at 15:51

I had a similar issue and using the clientPort option in the the config solved it form me.

I'm also using Caddy inside Docker and here's my config:

:80 {
    reverse_proxy /api/* back:3000
    reverse_proxy /graphql back:3000
    reverse_proxy front:8080
}

I use it as a reverse proxy and here "front" makes reference to my Vue app served by Vite in development mode.

By adding this in my vite.config.ts it fixed the problem.

 server: {
    port: 8080,
    host: "0.0.0.0",
    hmr: {
      clientPort: 80,
    },
  },

Link to vite doc - server.hmr config

Not sure if that's the correct solution. Hope it helps.

I only added the hmr clientPort like HamzStramGram did, and it solved my problem. i.e. server:{hmr:{clientPort:80,},}, Other information is redundant to me and makes my server not reachable. Thanks. — Xiaoqi, Feb 02 '23 at 08:50

score 3 · Answer 2 · answered May 17 '22 at 13:30

I am also in the process of migrating a Vue app to Vite. Therefore I changed the ports in docker-compose.yml from the standard-Vue 8080->8080 to Vite's 3000->8080 (to keep the outward-facing port the same).

version: "3.7"
services:
        ...
        ports:
        - 8080:3000

However, Vite would not know about this port remapping. Thus I needed to add clientPort: 8080 (my actually exposed port) to vite.config.js:

export default defineConfig({
  ...
  server: {
    hmr: {
      clientPort: 8080,
    },
  }
}

Cullen McGovern · Answer 3 · 2022-05-09T17:27:05.603

1

I had a similar problem using nginx with ssl. It was trying on port 80 with ws instead of wss. Your details will be different, but I looked at the logs to see what nginx was doing, then looked in the browser to see what it was trying to do. This is my (partial) vite.config.js:

export default defineConfig({
  server: {
    // hot module reload for dev server
    hmr: {
      host: 'yourhost',
      protocol: 'wss',
      clientPort: 443
    }
  }
})

edited May 09 '22 at 17:27

answered May 09 '22 at 17:19

Cullen McGovern

11
3

HamzStramGram's answer solved my problem for http, but this one solved both http and https reload loop issue for me. Thanks. – Xiaoqi Feb 02 '23 at 09:14

score 1 · Answer 4 · answered Apr 11 '23 at 19:05

I Had similar issue, reverse proxy with nginx. The problem fixed by:

Add hmr path to vite.config.js

server: {
  port: 3000,
  hmr: {
    path: 'ws',
  },
},

And add nginx config for reversing ws path

location / {...}
# new config start
location /ws {
  proxy_pass http://localhost:3000;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "Upgrade";
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

Vite Reload Loop

4 Answers4

Linked