Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hot reload dont work when you use docker #36774

Open
1 task done
GorlikItsMe opened this issue May 9, 2022 · 28 comments
Open
1 task done

Hot reload dont work when you use docker #36774

GorlikItsMe opened this issue May 9, 2022 · 28 comments
Labels
bug Issue was opened via the bug report template.

Comments

@GorlikItsMe
Copy link

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 GorlikItsMe added the bug Issue was opened via the bug report template. label May 9, 2022
@GorlikItsMe
Copy link
Author

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
Copy link

jhaeti commented Jul 19, 2022

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
Copy link

shankiflang commented Jul 29, 2022

@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
Copy link

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
Copy link

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
Copy link

PaRaD1SE98 commented Oct 10, 2022

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
Copy link

mphbo commented Oct 11, 2022

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
Copy link

PaRaD1SE98 commented Oct 11, 2022

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
Copy link

jotozhun commented Jan 7, 2023

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
Copy link

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
Copy link

sacru2red commented Feb 21, 2023

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
Copy link

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
Copy link

I added the following line to my Dockerfile:

ENV WATCHPACK_POLLING true

@sergiycheck
Copy link

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
Copy link

Emroni commented Jun 5, 2023

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
Copy link

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

image

PatrikTrefil added a commit to PatrikTrefil/mental-health-monitoring-platform that referenced this issue Jul 3, 2023
it was too slow. see this issue vercel/next.js#36774
@faraasat
Copy link

faraasat commented Jul 23, 2023

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
Copy link

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
Copy link

mrfzd commented Oct 11, 2023

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!
image

@zeeyang
Copy link

zeeyang commented Nov 1, 2023

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
Copy link

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
Copy link

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
Copy link
Contributor

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
Copy link

leoeiji commented Jul 6, 2024

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
Copy link

jhssilva commented Aug 8, 2024

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

@nparoski
Copy link

@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
Copy link

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.

karisal-anders added a commit to City-of-Helsinki/palvelutarjotin-ui that referenced this issue Oct 21, 2024
now "docker compose up --build" spins up a development build locally,
hot reloading on Windows 11 + Docker Desktop didn't work, but that
may be Windows + WSL2 specific setup problem, see the following:
- vercel/next.js#36774
- microsoft/WSL#4739

also:
 - remove deprecated version number from docker-compose.yml

refs PT-1792
karisal-anders added a commit to City-of-Helsinki/palvelutarjotin-ui that referenced this issue Oct 22, 2024
now "docker compose up --build" spins up a development build locally,
hot reloading on Windows 11 + Docker Desktop didn't work, but that
may be Windows + WSL2 specific setup problem, see the following:
- vercel/next.js#36774
- microsoft/WSL#4739

also:
 - remove deprecated version number from docker-compose.yml

refs PT-1792
nikomakela added a commit to City-of-Helsinki/palvelutarjotin-ui that referenced this issue Oct 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests