Hot reload dont work when you use docker

[GorlikItsMe]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

/app # yarn run info
yarn run v1.22.18
$ next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Wed Mar 2 00:30:59 UTC 2022
    Binaries:
      Node: 16.15.0
      npm: 8.5.5
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.1.7-canary.3
      react: 17.0.2
      react-dom: 17.0.2

Done in 2.07s.

Which example does this report relate to?

https://github.com/vercel/next.js/tree/canary/examples/with-docker

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When I make changes in code app doesn't recompile itself. Hot reload doesn't work.

Expected Behavior

When I make changes in for example pages/index.js app should recompile and browsers should refresh page.

To Reproduce

I make this repo to show the problem: https://github.com/GorlikItsMe/next-js-docker-swc-hot-reload-dont-work

Steps:

1. Download repo https://github.com/GorlikItsMe/next-js-docker-swc-hot-reload-dont-work
2. docker-compose up --build
3. Make a change in /src/pages/index.js
4. Hot reload doesn't work
5. Manually refresh page also don't work

My environment:
windows 10 with Docker Desktop.

[GorlikItsMe]

I find temporary fix

Create next.config

module.exports = {
    webpackDevMiddleware: config => {
        config.watchOptions = {
            poll: 1000,
            aggregateTimeout: 300,
        }
        return config
    },
}

But after that I switch from SWC to Webpack5 (which is slow).

Is there a way to run it with new faster compiler (swc)?

[jhaeti]

In next.config.js
module.exports = { webpackDevMiddleware: config => { config.watchOptions = { poll: 1000, aggregateTimeout: 300, } return config }, }

And the set an environment variable of
ENV CHOKIDAR_USEPOLLING=true
in the Dockerfile

[shankiflang]

@GorlikItsMe I have the same problem !

In next.config.js module.exports = { webpackDevMiddleware: config => { config.watchOptions = { poll: 1000, aggregateTimeout: 300, } return config }, }

And the set an environment variable of ENV CHOKIDAR_USEPOLLING=true in the Dockerfile

Your solution doesn't work for me 😓

[ryohpops]

I had the same problem and I managed to find a solution. The fix by GorlikItsMe should be adapted to the latest structure of next.config.js.

Here is my next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  // except for webpack, other parts are left as generated
  webpack: (config, context) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300
    }
    return config
  }
}

module.exports = nextConfig

It seems CHOKIDAR_USEPOLLING=true is not necessary for my environment which is inside a devcontainer.

yarn run v1.22.19
    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Wed Mar 2 00:30:59 UTC 2022
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 12.2.4
      eslint-config-next: 12.2.4
      react: 18.2.0
      react-dom: 18.2.0

[PaRaD1SE98]

I find temporary fix

Create next.config

module.exports = {
    webpackDevMiddleware: config => {
        config.watchOptions = {
            poll: 1000,
            aggregateTimeout: 300,
        }
        return config
    },
}

But after that I switch from SWC to Webpack5 (which is slow).

Is there a way to run it with new faster compiler (swc)?

This works but is very very slow.

[PaRaD1SE98]

It turns out that I reinstall my windows Docker Desktop with Hyper-v but not WSL2 solved this problem. This problem is caused by a WSL2 bug that still exists here: microsoft/WSL#4739 (comment)

This way doesn't need to change the config and we can still use the SWC compiler.

[mphbo]

I have tried all the changes above and I still have this issue, I'm also on mac so @PaRaD1SE98 fix shouldn't affect me. Has anyone else had any luck with anything else?

[PaRaD1SE98]

I found a better solution than #36774 (comment)

Still use WSL2 version of Windows Docker Desktop, but just clone your repository in your WSL Linux /home directory. (Can do that easily by installing WSL Extention if using Vscode) Since you can open the WSL Linux directory conveniently using the windows file manager, there is no harm to do this. The key is just don't mount your windows file system to the WSL Linux as long as the WSL2 Bug microsoft/WSL#4739 (comment) still exists. (Check your project directory is not in this style /mnt/c/Users/username/...)

[jotozhun]

I had the same problem and I managed to find a solution. The fix by GorlikItsMe should be adapted to the latest structure of next.config.js.

Here is my next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  // except for webpack, other parts are left as generated
  webpack: (config, context) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300
    }
    return config
  }
}

module.exports = nextConfig

It seems CHOKIDAR_USEPOLLING=true is not necessary for my environment which is inside a devcontainer.

yarn run v1.22.19
    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Wed Mar 2 00:30:59 UTC 2022
    Binaries:
      Node: 16.15.1
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 12.2.4
      eslint-config-next: 12.2.4
      react: 18.2.0
      react-dom: 18.2.0

Thanks, this worked for me. I'm using next 13.1.1 and node 18.11.18.

[nightspite]

Adding exact volume values worked for me.
So instead of

volumes:
	- ./src:/app
	- /app/node_modules
	- /app/.next

Specify them this way:

volumes:
	- './src/pages:/app/pages'
	- './src/public:/app/public'
	- './src/styles:/app/styles'
	- './src/package.json:/app/package.json'
etc...

[sacru2red]

next.config.js

webpack: (config, context) => {
    // https://webpack.kr/configuration/watch/#watchoptions
    // https://github.com/vercel/next.js/issues/36774#issuecomment-1211818610
    config.watchOptions = {
      // default is 5007
      // https://github.com/webpack/watchpack/blob/a54bcdb95759558ca5a9fc2819c4d71b771c162f/lib/DirectoryWatcher.js#L79
      poll: 1000,
    }
    return config
  }

[calliope-pro]

I set the environment variable to WATCHPACK_POLLING=true instead of CHOKIDAR_USEPOLLING=true and it worked for me.
I did not change the next.config.js.

"scripts": {
    "dev": "WATCHPACK_POLLING=true next dev",
    ...
}

[abdulmansour]

I added the following line to my Dockerfile:

ENV WATCHPACK_POLLING true

[sergiycheck]

I added the following line to my Dockerfile:

ENV WATCHPACK_POLLING true

didn't work for me, I use docker compose, and "next": "13.2.4"

[Emroni]

I got it working by adding an (ignored) override file so I could have a different config for local development:

# docker-compose.override.yml
services:

  webapp:
    command: yarn dev
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000
    volumes:
      - ./:/app
      - ./node_modules:/app/node_modules
      - ./.next:/app/.next

[tomhobbsBBC]

A fix for me was to update my Docker General settings to enable VirtioFS:

[eli-front]

https://medium.com/@elifront/best-next-js-docker-compose-hot-reload-production-ready-docker-setup-28a9125ba1dc

[faraasat]

Adding the following variables in Dockerfile worked for me:

   ENV NODE_ENV=development
   ENV CHOKIDAR_USEPOLLING=true
   ENV WATCHPACK_POLLING=true

Using Nextjs 13.4.12 and compilation seems a little bit slower!

Also you can find step-by-step instruction in this article: https://faraasat.medium.com/using-next-js-13-app-directory-with-hot-reload-enabled-in-docker-simple-guide-60de42840d7e

[renatoastra]

Adding the following variables in Dockerfile worked for me:

   ENV NODE_ENV=development
   ENV CHOKIDAR_USEPOLLING=true
   ENV WATCHPACK_POLLING=true

Using Nextjs 13.4.12 and compilation seems a little bit slower!

It worked for me too, but its very slow =(

[mrfzd]

Adding the following variables in Dockerfile worked for me:

   ENV NODE_ENV=development
   ENV CHOKIDAR_USEPOLLING=true
   ENV WATCHPACK_POLLING=true

Using Nextjs 13.4.12 and compilation seems a little bit slower!

Thanks, this works for me too but very slow! Not instant as if I were to run the next app on its own outside of the Docker container!
Reflected changes take at least 2-3sec to show

Here is my docker-compose in case anyone is interested!

[zeeyang]

I ran into the same problem. It's not a next or docker problem but a docker host problem. In my case I was using colima, and the default filemount sshfs does not trigger file change updates. The fix is to use inotify mount: colima start --mount-inotify. ps if you have existing colima instance running, be sure to clean it up with colima stop; colima delete. Hope this helps.

[mariomediam]

Running Next.js v14.0.4 inside a Docker container

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config, context) => {
    // Enable polling based on env variable being set
    if(process.env.NEXT_WEBPACK_USEPOLLING) {
      config.watchOptions = {
        poll: 500,
        aggregateTimeout: 300
      }
    }
    return config
  },
}

module.exports = nextConfig

docker-compose.yml

environment:
      - "NEXT_WEBPACK_USEPOLLING=1"

I obtained the information from Solving Next.js fast refresh on Docker+Windows

[dgabriele]

The webpack watcher option sucks. CPU inside the container goes to 110% from 10-20%, and RAM goes from a few MB to 3-4GB from 1-2GB.

The fix for me was to add the ./app directory to the volumes list.

[SebassNoob]

Is there an equivalent polling option for turbopack? The docs say that the webpack configuration is not supported, so fast refresh on docker+windows with turbopack will not work with the above solutions.

[leoeiji]

In my case, I was using NGINX in a Docker Compose application. Just added in my .conf file:

location /_next/webpack-hmr {
    proxy_pass http://<frontend-container-name>:3000/_next/webpack-hmr;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

[jhssilva]

Unfortunatelly, tried every solution above and I wasn't able to fix it.

[nparoski]

@jhssilva If you are on windows try running project under WSL 2 as well as making all changes on WSL 2 instead of windows file system.

[jhssilva]

Hey @nparoski . Thanks for your reply.
I'm running on macOS, the docker is executing the Alphine version. However I've tried with multiple different OS and the issue remains.