next.js: 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:
- Download repo https://github.com/GorlikItsMe/next-js-docker-swc-hot-reload-dont-work
docker-compose up --build
- Make a change in
/src/pages/index.js
- Hot reload doesn’t work
- Manually refresh page also don’t work
My environment: windows 10 with Docker Desktop.
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 28
- Comments: 23
Commits related to this issue
- rm support for hot reloading it was too slow. see this issue https://github.com/vercel/next.js/issues/36774 — committed to PatrikTrefil/mental-health-monitoring-platform by PatrikTrefil a year ago
- build: 仮想環境下でのホットリロードの動作に必要な変更 compose.yaml - 仮想マシン内でのホットリロードに必要な環境変数を定義。 next.config.js - Strict Modeを有効化 - カスタムwebpackを作成し、ホットリロード機能を追加 参考: https://nao-uc.site/pg/next-js-docker-not-hot-reload/ h... — committed to the-bears-field/nextjs_rails by the-bears-field 3 months ago
I set the environment variable to
WATCHPACK_POLLING=true
instead ofCHOKIDAR_USEPOLLING=true
and it worked for me. I did not change thenext.config.js
.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
It seems CHOKIDAR_USEPOLLING=true is not necessary for my environment which is inside a devcontainer.
I find temporary fix
Create
next.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:
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 useinotify
mount:colima start --mount-inotify
. ps if you have existing colima instance running, be sure to clean it up withcolima 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
Specify them this way:
Running Next.js v14.0.4 inside a Docker container
next.config.js
docker-compose.yml
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
Thanks, this worked for me. I’m using next 13.1.1 and node 18.11.18.