Question 84831 in Docker Question posted in
The official documentation can be found here.

Vite Reload Loop – Docker

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.

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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
    }
  }
})
    Login or Signup to reply.
  3. 0

    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,
    },
  }
}
    Login or Signup to reply.
  4. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search