Vite Hot Module Reloading stopped working today

[nwoodr94]

Describe the bug

Today our working configuration for hot module reloading stopped working.

We have a Vite app running in a Docker container. When a src file changes, the app does not reload.

Reproduction

http://example.com/DOCKER_ISSUE

Steps to reproduce

Run npm create vite@latest

Place the scaffolded contents in a subdirectory called app.

Add the below docker-compose.local.yaml in the root directory.

version: "3"
services:
  app:
    build:
      context: ./app
      dockerfile: ./Dockerfiles/Dockerfile.local
    command: ["npm", "run", "start", "--", "--host"]
    ports:
      - "5173:5173"
    volumes:
      - "./app:/usr/src/app"
    restart: "no"

Add the below vite.config.jsx to the app directory.

vite.config.jsx

import { defineConfig } from "vite";

// Environment
import dotenv from "dotenv";
dotenv.config();

// Plugins
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  base: "/",
  plugins: [react(), viteTsconfigPaths()],
  server: {
    host: "0.0.0.0",
    watch: {
      usePolling: true,
    },
    hmr: { host: "0.0.0.0" },
  },
  define: {
    __VITE_APP_DJANGO_HOST__: process.env.VITE_APP_DJANGO_HOST,
  },
  build: {
    chunkSizeWarningLimit: 100,
    rollupOptions: {
      onwarn(warning, warn) {
        if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
          return;
        }
        warn(warning);
      },
    },
  },
});

Place the following Dockerfile.local in app/Dockerfiles

FROM node:latest

WORKDIR /usr/src/app

COPY . .

RUN npm install npm@latest
RUN npm install

Run docker-compose -f docker-compose.local.yaml build; docker-compose -f docker-compose.local.yaml up

Changes to the source code are not hot-reloaded

System Info

System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.3 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (122.0.2365.66)

### Used Package Manager

npm

### Logs

✔ Container vite-project-app-1 Recreated 0.1s
Attaching to app-1
app-1 |
app-1 | > [email protected] start
app-1 | > vite --debug --host
app-1 |
app-1 | 2024-03-05T23:12:20.551Z vite:config no config file found.
app-1 | 2024-03-05T23:12:20.559Z vite:config using resolved config: {
app-1 | root: '/usr/src/app',
app-1 | base: '/',
app-1 | mode: 'development',
app-1 | configFile: undefined,
app-1 | logLevel: undefined,
app-1 | clearScreen: undefined,
app-1 | optimizeDeps: {
app-1 | holdUntilCrawlEnd: true,
app-1 | force: undefined,
app-1 | esbuildOptions: { preserveSymlinks: false }
app-1 | },
app-1 | server: {
app-1 | preTransformRequests: true,
app-1 | host: true,
app-1 | sourcemapIgnoreList: [Function: isInNodeModules$1],
app-1 | middlewareMode: false,
app-1 | fs: {
app-1 | strict: true,
app-1 | allow: [Array],
app-1 | deny: [Array],
app-1 | cachedChecks: undefined
app-1 | }
app-1 | },
app-1 | configFileDependencies: [],
app-1 | inlineConfig: {
app-1 | root: undefined,
app-1 | base: undefined,
app-1 | mode: undefined,
app-1 | configFile: undefined,
app-1 | logLevel: undefined,
app-1 | clearScreen: undefined,
app-1 | optimizeDeps: { force: undefined },
app-1 | server: { host: true }
app-1 | },
app-1 | rawBase: '/',
app-1 | resolve: {
app-1 | mainFields: [ 'browser', 'module', 'jsnext:main', 'jsnext' ],
app-1 | conditions: [],
app-1 | extensions: [
app-1 | '.mjs', '.js',
app-1 | '.mts', '.ts',
app-1 | '.jsx', '.tsx',
app-1 | '.json'
app-1 | ],
app-1 | dedupe: [],
app-1 | preserveSymlinks: false,
app-1 | alias: [ [Object], [Object] ]
app-1 | },
app-1 | publicDir: '/usr/src/app/public',
app-1 | cacheDir: '/usr/src/app/node_modules/.vite',
app-1 | command: 'serve',
app-1 | ssr: {
app-1 | target: 'node',
app-1 | optimizeDeps: { noDiscovery: true, esbuildOptions: [Object] }
app-1 | },
app-1 | isWorker: false,
app-1 | mainConfig: null,
app-1 | isProduction: false,
app-1 | plugins: [
app-1 | 'vite:optimized-deps',
app-1 | 'vite:watch-package-data',
app-1 | 'vite:pre-alias',
app-1 | 'alias',
app-1 | 'vite:modulepreload-polyfill',
app-1 | 'vite:resolve',
app-1 | 'vite:html-inline-proxy',
app-1 | 'vite:css',
app-1 | 'vite:esbuild',
app-1 | 'vite:json',
app-1 | 'vite:wasm-helper',
app-1 | 'vite:worker',
app-1 | 'vite:asset',
app-1 | 'vite:wasm-fallback',
app-1 | 'vite:define',
app-1 | 'vite:css-post',
app-1 | 'vite:worker-import-meta-url',
app-1 | 'vite:asset-import-meta-url',
app-1 | 'vite:dynamic-import-vars',
app-1 | 'vite:import-glob',
app-1 | 'vite:client-inject',
app-1 | 'vite:css-analysis',
app-1 | 'vite:import-analysis'
app-1 | ],
app-1 | css: { lightningcss: undefined },
app-1 | esbuild: { jsxDev: true },
app-1 | build: {
app-1 | target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
app-1 | cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
app-1 | outDir: 'dist',
app-1 | assetsDir: 'assets',
app-1 | assetsInlineLimit: 4096,
app-1 | cssCodeSplit: true,
app-1 | sourcemap: false,
app-1 | rollupOptions: {},
app-1 | minify: 'esbuild',
app-1 | terserOptions: {},
app-1 | write: true,
app-1 | emptyOutDir: null,
app-1 | copyPublicDir: true,
app-1 | manifest: false,
app-1 | lib: false,
app-1 | ssr: false,
app-1 | ssrManifest: false,
app-1 | ssrEmitAssets: false,
app-1 | reportCompressedSize: true,
app-1 | chunkSizeWarningLimit: 500,
app-1 | watch: null,
app-1 | commonjsOptions: { include: [Array], extensions: [Array] },
app-1 | dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
app-1 | modulePreload: { polyfill: true },
app-1 | cssMinify: true
app-1 | },
app-1 | preview: {
app-1 | port: undefined,
app-1 | strictPort: undefined,
app-1 | host: true,
app-1 | https: undefined,
app-1 | open: undefined,
app-1 | proxy: undefined,
app-1 | cors: undefined,
app-1 | headers: undefined
app-1 | },
app-1 | envDir: '/usr/src/app',
app-1 | env: {
app-1 | VITE_APP_DJANGO_HOST: 'http://localhost:8000',
app-1 | BASE_URL: '/',
app-1 | MODE: 'development',
app-1 | DEV: true,
app-1 | PROD: false
app-1 | },
app-1 | assetsInclude: [Function: assetsInclude],
app-1 | logger: {
app-1 | hasWarned: false,
app-1 | info: [Function: info],
app-1 | warn: [Function: warn],
app-1 | warnOnce: [Function: warnOnce],
app-1 | error: [Function: error],
app-1 | clearScreen: [Function: clearScreen],
app-1 | hasErrorLogged: [Function: hasErrorLogged]
app-1 | },
app-1 | packageCache: Map(1) {
app-1 | 'fnpd_/usr/src/app' => {
app-1 | dir: '/usr/src/app',
app-1 | data: [Object],
app-1 | hasSideEffects: [Function: hasSideEffects],
app-1 | webResolvedImports: {},
app-1 | nodeResolvedImports: {},
app-1 | setResolvedCache: [Function: setResolvedCache],
app-1 | getResolvedCache: [Function: getResolvedCache]
app-1 | },
app-1 | set: [Function (anonymous)]
app-1 | },
app-1 | createResolver: [Function: createResolver],
app-1 | worker: { format: 'iife', plugins: '() => plugins', rollupOptions: {} },
app-1 | appType: 'spa',
app-1 | experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
app-1 | getSortedPlugins: [Function: getSortedPlugins],
app-1 | getSortedPluginHooks: [Function: getSortedPluginHooks]
app-1 | }
app-1 | 2024-03-05T23:12:20.571Z vite:deps removing old cache dir /usr/src/app/node_modules/.vite/deps
app-1 | 2024-03-05T23:12:20.574Z vite:deps scanning for dependencies...
app-1 |
app-1 | VITE v5.1.5 ready in 117 ms
app-1 |
app-1 | ➜ Local: http://localhost:5173/
app-1 | ➜ Network: http://172.23.0.2:5173/
app-1 | 2024-03-05T23:12:20.591Z vite:deps Crawling dependencies using entries:
app-1 | /usr/src/app/index.html
app-1 | 2024-03-05T23:12:20.608Z vite:resolve 0.19ms /main.js -> /usr/src/app/main.js
app-1 | 2024-03-05T23:12:20.613Z vite:resolve 1.92ms ./src/counter.js -> /usr/src/app/src/counter.js
app-1 | 2024-03-05T23:12:20.621Z vite:deps Scan completed in 46.78ms: no dependencies found
app-1 | 2024-03-05T23:12:20.622Z vite:deps creating package.json in /usr/src/app/node_modules/.vite/deps_temp_97945337

### Validations

- [X] Follow our [Code of Conduct](https://github.com/vitejs/vite/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://vitejs.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/vitejs/vite/issues) that reports the same bug to avoid creating a duplicate.
- [X] 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](https://github.com/vuejs/core) instead.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vitejs/vite/discussions) or join our [Discord Chat Server](https://chat.vitejs.dev/).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

[sapphi-red]

Add the below vite.config.jsx to the app directory.

Vite does not load vite.config.jsx by default. I guess it'd work if you name it vite.config.js or vite.config.mjs.

[nwoodr94]

It seems my vite.config.jsx is loaded because the environment variables are accessible in the app.

Have you tried the reproduction? HMR does not work even in the minimal reproduction.

[nwoodr94]

The docs should read that to enable hot-module-reloading inside a Docker container, your vite.config.js should look like this:

import { defineConfig } from "vite";

export default defineConfig({
  base: "/",
  server: {
    host: "0.0.0.0",
    watch: {
      usePolling: true,
    },
    hmr: { host: "0.0.0.0" },
  },
});

However unfortunately as of March 1 2024, this is no longer true.

[nwoodr94]

For some reason, the correct configuration for HMR in Docker is now

server : {
  port: 3000 // must be a port other than 5173
  host: true,
  watch: {
    usePolling: true,
  },
}

I wish I knew what happened to break all my apps, but this fixed it

[gmalanchuk]

thanks bro. you saved me a lot of time

[nwoodr94]

Did it work for you? This exact configuration worked, and then the next day I logged on and it wasn't working anymore.

I spent the entire weekend ripping Vite out and refactoring for NextJS. Absolute waste of my time, very disappointed in Vite for not supporting this better.

I spent 3 days investigating Vite's HMR, and I'm going on day 4 of our refactor. Apparently I'm insane, because nobody else seems to have this problem, except every single one of our company, and personal machines.

[nonInfelix]

Thank you, that fixed it. @nwoodr94

my Dockerfile.dev

FROM node:lts

WORKDIR /usr/frontend

COPY package*.json ./

RUN npm install

COPY . .

package.json (host flag)

"scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },

docker compose yaml

frontend:
    build:
      context: ./frontend/
      dockerfile: Dockerfile.dev
    container_name: frontend
    restart: always
    ports:
      - "4200:4200"
    #  - "5173:5173"
    command: "npm run dev"
    networks:
      - intranet
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.frontend.rule=Host(`web.localhost`)&&PathPrefix(`/`)"
      - "traefik.http.routers.frontend.priority=2"
      - "traefik.http.routers.frontend.service=frontend"
      #- "traefik.http.services.frontend.loadbalancer.server.port=5173"
      - "traefik.http.services.frontend.loadbalancer.server.port=4200" #changed
      - "traefik.http.routers.frontend.entrypoints=web"
    volumes:
      - "./frontend/src:/usr/frontend/src"
      - "./frontend/node_modules:/usr/frontend/node_modules"
      - "./frontend/vite.config.js:/usr/frontend/vite.config.js"

vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],

server: {
 port: 4200, // must be a port other than 5173
 host: true,
 watch: {
   usePolling: true,
 },
},
// server: {
//   host: true,
//   hmr: { host: "0.0.0.0" },
//   watch: {
//     usePolling: true,
//   },
// },
});

[nwoodr94]

TL;DR Vite hot module reloading does NOT work consistently in Docker as of 3/1/2024.

Some vite.config.js configurations work for one machine, while other configurations work for other machines. Sometimes, the same configuration works one day, and stops working the next.

[maziar-dandc]

Funny thing, when I rename the scss/js files that are supposed to be compiled, it works for a while until I need to rename them again, feels like a caching problem. Can you try to see if that also works for you?

Django + https://github.com/protibimbok/django-vite-plugin here.

[innoligentdeveloper]

I am facing the same issue, last week HMR stopped working.

[innoligentdeveloper]

I found the solution to the problem, apparently there were some corrupt files in my development environment. I cleaned them, raised the environment again and everything started working fine.

[nwoodr94]

What does "corrupt files in my development environment" mean?

[innoligentdeveloper]

Apparently I assume the problem was due to some corrupt files in the file system of my code. because for example, in the frontend code files, particularly in '/var/www/html/app/src/views/apps/tasklist' I got this i/o error:

frontend | [Error: EIO: i/o error, scandir '/var/www/html/app/src/views/apps/tasklist'] {
frontend | errno: -5,
frontend | code: 'EIO',
frontend | syscall: 'scandir',
frontend | path: '/var/www/html/app/src/views/apps/tasklist'
frontend | }

And on my database files too:
mysql-container | 2024-03-20T11:41:27.058618Z 0 [ERROR] [MY-012592] [InnoDB] Operating system error number 5 in a file operation.
mysql-container | 2024-03-20T11:41:27.058757Z 0 [ERROR] [MY-012596] [InnoDB] Error number 5 means 'Input/output error'
mysql-container | 2024-03-20T11:41:27.058780Z 0 [ERROR] [MY-012646] [InnoDB] File ./#innodb_temp/temp_4.ibt: 'open' returned OS error 105. Cannot continue operation

So, I copy all my code and database files to other location on the disk and raise all the environment again and it worked just fine.

[Nico142]

I'm facing a similar issue for the past few weeks. When I change only one file at a time, everything works fine. But when I change two or more files and save them together, only one file updates in the UI with HMR. Also, refreshing the Page without cache doesn't resolve the issue. I have to change the incorrect files again to get them updated. However, inside the Docker container, all files are changed, and their update timestamps are correct.

Interestingly, if I use Vite's local server without Docker, I don't encounter these issues, so it's definitely related to Docker.

I'm not sure if usePolling is the solution because the documentation states: Note that usePolling leads to high CPU utilization.
It seems like it's generally not recommended to use it.