HMR is not working in the Docker environment. The usePolling option works fine, and the page keeps refreshing, but it still has no effect.

[jumodada]

Describe the bug

I tried running the Vite project in Docker. I searched through the documentation and found many solutions provided by others. While I was able to successfully run it and achieve polling to refresh the page, changes in the code are not reflected on the page.

this is my vite config

  server:{
    host: true,
    port: 8080,
    strictPort: true,
    hmr:{
      clientPort: 8080,
      port: 8081
    },
    watch: {
      usePolling: true
    }
  }

this is my docker file

FROM node:18.0.0
WORKDIR /app
COPY package*.json yarn.lock ./
RUN npm i yarn -g  --force
RUN yarn
COPY .. .
EXPOSE 8080
CMD ["yarn", "dev"]

this is my docker compose yml

version: '3.8'
services:
  vitepress:
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - "8080:8080"
    volumes:
      - ./:/usr/src/app
    command: yarn run dev

I have simplified the issue down to the project address below, which is an original Vite project that can be quickly replicated.

https://github.com/jumodada/vite-docker-issue

So far, the polling refresh is working properly, but the actual effect is not meeting expectations.

Reproduction

https://github.com/jumodada/vite-docker-issue

Steps to reproduce

run

yarn run start

my docker version

Docker: 27.2.0
Docker Compose version v2.29.2-desktop.2

System Info

System:
    OS: macOS 12.5.1
    CPU: Apple M1 Max
  Binaries:
    Node: 18.0.0
    Yarn: 1.22.22
    npm: 8.6.0
    Docker:  27.2.0
    Docker Compose version v2.29.2-desktop.2
  Browsers:
    Brave Browser: 126.1.67.119
    Chrome: 130.0.6723.119
    Edge: 131.0.2903.48
    Safari: 17.4
  npmPackages:
    vite: ^5.4.10

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]

server.hmr.clientPort and server.hmr.port should not be set in this case.

Also you are not mounting on the correct path. - ./:/usr/src/app should be - ./:/app. You also need to add - /app/node_modules to volumes so that the node_modules are isolated from the host. After changing those the docker-compose.yaml will be:

version: '3.8'
services:
  vitepress:
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - "8080:8080"
    volumes:
      - ./:/app
      - /app/node_modules
    command: yarn run dev

[jumodada]

Thank you for your answer, but I still can't solve the problem after following the instructions. What I mean is that if I delete server.hmr.clientPort, the polling refresh action will stop.

[sapphi-red]

What I mean is that if I delete server.hmr.clientPort, the polling refresh action will stop.

Vite does not use polling for HMR, so that's expected.