Hot reload dont work when you use docker

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.

[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

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