next.js: Hot reload not working at latest version of Next.js
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:53:44 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T8103
Binaries:
Node: 18.16.0
npm: 9.5.1
Yarn: 1.22.19
pnpm: 8.5.1
Relevant packages:
next: 13.4.5-canary.12
eslint-config-next: 13.4.5
react: 18.2.0
react-dom: 18.2.0
typescript: 5.1.3
Which area(s) of Next.js are affected? (leave empty if unsure)
No response
Link to the code that reproduces this issue or a replay of the bug
To Reproduce
- npx create-next-app@latest (next-tw)
- yarn install
- yarn dev
Describe the Bug
main-app.js:1425 Uncaught TypeError: __webpack_require__.ts is not a function
at (app-client)/./node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js
Expected Behavior
Hot reload should work
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
About this issue
- Original URL
- State: open
- Created a year ago
- Reactions: 46
- Comments: 55 (3 by maintainers)
Just like to chime in. I was on node
v16.13.1
and nextjs13.4.19
Problems:
I just updated node version to
v18.17.1
and all those problems went away.So I got a fix for mine. I think the hot reload works. If you are working with wsl2, ensure you move your next folders/app to the home directory.
In fact, it has nothing to do with NextJs in my case. The next app was in the mnt/c folders was what made the HMR not work.
@weyert not working for me as of 13.4.19
@leerob
Would you mind taking a look at this please? It’s really killing dev productivity…(and is very frustrating since we’ve been spoiled with a super awesome HMR prior to this)
Would appreciate it so much!
Hey, I think many people are facing this issue, because of the node version. Like me, i was using node v16.3 in nvm as default. but nextjs docs says it needs atleast 16.4. Since i didn’t get any errors during my setup, i forgot to change my node version. but then later i got this issue when is started to code. since i was using default setup from the docs itself, i immediately realised its the node issue. I switched to node 20 and its working very smoothly.
maybe as in the docs, if there is a way to check the node version during development, its better to throw an error/warning to update node version.
4 days. Is it just me but the current npx create-next-app@latest is broken. It does not refresh on editing and a simple not-found leaves a blank page. Can someone please confirm that this is true. before i loose my marbles.
This is straight out the box, no custom servers - no nothing?
I just found out my problem was not due to the next.js version but a problem in my layout.tsx.
The issue was in my layout.tsx file that was causing hydration / mounting issues because of a dom mismatch.
Here is the exact section from documentation
Additionally, don’t put any Wrapper Element outside body tag like this:
but make sure that body tag always includes all components
Hope it helps!
I have the same problem. It would be nice if the hot reloading script would throw more logs, so we knew why it’s happening.
Not working for me.
node 20.10.0
&next 14.0.4
. I can see the[Fast Refresh] rebuilding
on the browser, but nothing happens.Hey, guys. I also have this problem on the latest version. I switched to version 13.4.15 and that helped me.
Most likely the issue would be related to import or export statement.
Correct casing of the import statements is very important, Notice the casing of letter “H” in the “heroSection”.
import HeroSection from "@/components/pageComponents/HeroSection";
import HeroSection from "@/components/pageComponents/heroSection";
Spent probably three hours trying to find my bug. HMR did not work. I have a pages directory and an app directory (Migrating from pages to app). Deleted my metadata export, font and CSS on my app layout. Relaunch the dev server. Hard reload.
Boom it works!
Now to pinpoint the problem.
Edit: It is not the metadata. Edit 2: Not the font. Guess it’s a problem with globals CSS import? Edit 3: The CSS import in the layout.tsx causes changes in files to full-reload.
I have no fix.
Here is my repo: https://github.com/Skippou/next-dynamic-test/tree/HMRnotWorking
Edit 4: It works if I downgrade to NextJS 13.2 as suggested in: https://github.com/vercel/next.js/issues/57046#issue-1951896689
Having this problem too on my mac. I’ve been trying to swap node versions (v16.20.2, v20.9.0, v21.1.0) and none of them worked for me.
Not sure why but I also have issue with hot reload. In the browser I see [Fast Refresh] rebuilding but dom is never updated. Any changes to the code require hard reload - basically not able to develop with such performance.
"next": "^14.0.4",
node 20.11
Not working for me.
Node 20.10.0
&Next 14.0.4
for.tsx
files only. (It also failed with Next 12 and 13) and React 17 and 18. However changes to SCSS files for CSS modules refreshing normally. I even get the message on the browser[Fast Refresh] done in 196ms
. But the DOM is never updated. I’m using localized static generation (output: export
) withgetStaticProps
andgetStaticPaths
as described in this official guideHMR still not working in Firefox 118.0.2 using Next 13.5.6 on MacOS 14.0
Testing not-found.js on a fresh build also just returns a blank page. Everything worked in 13.4.2 when I test it.
This happened to me too. It was fixed by removing the metadata export in layout.tsx generated by the npx script, since that’s a non-react component export, presumably.
@samivagyok-web I faced the same problem but with a 13.5.4 version. It turns out it was a typo in one of my imports from a page, just like @Sumansourabh14 pointed out. So, I’d suggest you to double check your imports.
The following worked for me.
I had to create a
nodemon.json
file in my root directory with the following content:After this, my Next.js app started reloading after any change made in the app.
Version:
"next": "14.1.0"
"node": "18.17.0"
For me updating the node version to the latest fixes the issue, before I was using node version 18.16.0 now it’s 20.9.0
HMR still not working in Google Chrome or Brave using Next 13.5.6 on Windows 11
I was unable to reproduce using your steps. However, I am having this issue with my own project which started in
v13.3.0
. I was able to narrow it down to an issue around the custom server. Removing this server resolved my issue.Looks like custom servers also impact some other performance optimizations (see below from the documentation).
I’ll be working on my own workaround without a custom server.
Hopefully this helps!
I’m glad you found a solution for yours.
I’m not using wsl2 but mine performs full reload for almost every change. Even file saves without any changes causes a full reload.