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.

[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]

Vite hot module reloading does NOT work consistently in Docker. See #16102 (comment) for possible fix

Some vite.config.js configurations work for one machine, while other configurations work for other machines. This is a machine specific problem, because the issue is sometimes reproducible across Windows, Mac, and Linux (Debian and Ubuntu).

Further complicating this issue, sometimes the same configuration works one day, and stops working the next. Sometimes two users on the same OS, will need two different vite.config.js to enable HMR in Docker.

[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.

[dollro]

Hi @Nico142 , @nwoodr94

I played around with it - and have a quite stable fullstack setup now using django-vite in local venv but also docker.
The cookiecutter template for it can be found here
https://github.com/dollro/cookiecutter-fullstack-django-vue3

In particular, setting explicitly in vite.config.js
https://github.com/dollro/cookiecutter-fullstack-django-vue3/blob/cebbdcdf865a677b165083ff6782b798ebc4c4c7/%7B%7B%20cookiecutter.project_slug%20%7D%7D/frontend_vue/vite.config.js

server: {
origin: .....
}

was to trick it did for may. Maybe not related?