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.

Answer 1

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.

Answer 2

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
    }
  }
})

Answer 3

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,
    },
  }
}