Docker + Vite + HMR = No/Slow reload

[pmabres]

Describe the bug

Hello!
I'm trying to debug an issue happening when trying to run a vite dev server inside a docker container.
The HMR process does not work unless using polling inside docker, and the interval does not seem to work as files trigger changes every 12 seconds(ish).

I've seen already that vite uses:
https://github.com/paulmillr/chokidar
as a file watcher for HMR.

Chokidar already has an issue reported about this: paulmillr/chokidar#1051
but is not really that helpful.

I'm using:

• MacOS Ventura: 13.4
• Docker version 24.0.5
• (I'm using colima): colima version 0.5.5
• Docker Compose version 2.20.2

Dockerfile

FROM node:18.17

WORKDIR /app
COPY ./package*.json /app/.
RUN npm install --loglevel verbose
EXPOSE 3000 3010

CMD ["npm", "start"]

docker-compose.yml

services:
  frontend:
    restart: always
    command : sh -c "npm start"
    container_name: frontend
    # CHOKIDAR polling can be enabled either from vite config or as an environment variable.
    # environment:
    #   - CHOKIDAR_USEPOLLING=true
    #   - CHOKIDAR_INTERVAL=100
    volumes:
      - ./:/app
      - /app/node_modules
    build:
      context: .
      dockerfile: Dockerfile
      no_cache: true
    ports:
      - "3000:3000"
      - "3010:3010"

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import checker from "vite-plugin-checker";
import eslintPlugin from "@nabla/vite-plugin-eslint";
import postcssImport from "postcss-import";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000,
    host: true,
    strictPort: true,
    hmr: {
      port: 3010,
    },
    watch: {
      usePolling: true,
      // useFsEvents: true,
      // interval: 100,
    },
  },
  plugins: [
    react(),
   // Enabling / disabling these dependencies have no effect.
    eslintPlugin(),
    postcssImport(),
    checker({
      // e.g. use TypeScript check
      typescript: true,
    }),
  ],
});

command used to start vite:
vite -d --logLevel info

Reproduction

https://github.com/pmabres/vite-docker-hmr

Steps to reproduce

happens only when ran inside a docker container

System Info

System:
    OS: macOS 13.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 1.57 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.0 - /usr/local/bin/node
    npm: 9.8.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Safari: 16.5
  npmPackages:
    @vitejs/plugin-react-swc: ^3.3.2 => 3.3.2 
    vite: ^4.4.0 => 4.4.4 


inside docker:
System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 06/9e
    Memory: 867.04 MB / 1.93 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 18.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.7 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react-swc: ^3.3.2 => 3.3.2
    vite: ^4.4.0 => 4.4.4

Used Package Manager

npm

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 vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

coilma seems to not support inotify (lima-vm/lima#615). But it seems there's an experimental option for it: abiosoft/colima#261 (comment).

[pmabres]

That did the trick!. Sorry I didn't suspect colima would be responsible for this issue!

[pmabres]

out of curiosity: Do you know why the interval of the Chokidar polling setting does not work?

[sapphi-red]

out of curiosity: Do you know why the interval of the Chokidar polling setting does not work?

I don't know but I guess it's a bug in colima if it works with the normal Docker.

[VigilioYonatan]

any solution?

[pmabres]

Try the solution provided above:

colima start --mount-inotify

[IlyasMohetna]

If anyone is experiencing the same issue I faced, where HMR (Hot Module Replacement) behaves inconsistently—sometimes it works, sometimes it doesn’t, and occasionally it reloads the whole page—here’s the solution I found after spending two days debugging.

---

The Solution:

Make sure to open your IDE (e.g., VS Code) from the WSL terminal, like this:

cd ~/your-project
code .

Dont forget also to add the official WSL extension

Why This Works:

When you open VS Code directly from Windows, it runs as a Windows process, even if your files are located in the WSL filesystem. This creates instability with file change notifications because WSL2 cannot reliably detect file modifications made by Windows-based processes.

By launching VS Code from the WSL terminal, all file operations happen natively within the WSL environment, ensuring that file change notifications are stable. This resolves the inconsistent HMR behavior.