next.js: Hot reload dont work when you use docker

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",
    ...
}

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

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)?

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

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: https://github.com/microsoft/WSL/issues/4739#issue-534049240

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

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.

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

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

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

I added the following line to my Dockerfile:

ENV WATCHPACK_POLLING true

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.