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)

Most upvoted comments

Just like to chime in. I was on node v16.13.1 and nextjs 13.4.19

Problems:

hot reload not working, like OP
clicking links reloads the whole page
annoying “ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time” in console

I just updated node version to v18.17.1 and all those problems went away.

+36

ko-lem on Aug 29, 2023

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.

+23

kelvinsekx on Jun 22, 2023

@weyert not working for me as of 13.4.19

+20

meds on Aug 19, 2023

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

+14

JasonA-work on Jun 21, 2023

Could everyone please provide their environment info similar to the original issue? And what is the last version it is working for you?

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.

sandrinjoy on Aug 26, 2023

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?

McAndersC on Aug 24, 2023

HMR still not working in Google Chrome or Brave using Next 13.5.6 on Windows 11

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

The root layout must define <html> and <body> tags since Next.js does not automatically create them.

Additionally, don’t put any Wrapper Element outside body tag like this:

   <AuthProvider>
    <body>
          {children}
     </body>
   </AuthProvider>

but make sure that body tag always includes all components

<body>
   <AuthProvider>
      {children}
  <AuthProvider>
</body>

Hope it helps!

patchitodev on Oct 25, 2023

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.

ahmafi on Mar 20, 2024

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.

leonardorb on Dec 22, 2023

Hey, guys. I also have this problem on the latest version. I switched to version 13.4.15 and that helped me.

lazarevartur on Aug 25, 2023

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";

Sumansourabh14 on Feb 3, 2024

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

  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 20.9.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.9
  eslint-config-next: 14.0.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Edit 4: It works if I downgrade to NextJS 13.2 as suggested in: https://github.com/vercel/next.js/issues/57046#issue-1951896689

Skippou on Nov 22, 2023

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.

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:32:11 PDT 2023; root:xnu-10002.41.9~7/RELEASE_ARM64_T6030
Binaries:
  Node: 16.20.2
  npm: 8.19.4
  Yarn: N/A
  pnpm: 8.10.2
Relevant Packages:
  next: 14.0.1
  eslint-config-next: 14.0.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

showduhtung on Nov 9, 2023

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

"devDependencies": {
    "@types/bcrypt": "^5.0.2",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.33",
    "tailwindcss": "^3.4.1"
  }

node 20.11

devdomsos on Jan 19, 2024

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) with getStaticProps and getStaticPaths as described in this official guide

logusgraphics on Dec 27, 2023

HMR still not working in Firefox 118.0.2 using Next 13.5.6 on MacOS 14.0

pelachile on Oct 23, 2023

Testing not-found.js on a fresh build also just returns a blank page. Everything worked in 13.4.2 when I test it.

McAndersC on Aug 20, 2023

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.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

// export const metadata: Metadata = {
//   title: "Create Next App",
//   description: "Generated by create next app",
// };

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

postinternetsyndrome on Apr 14, 2024

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

matheusdamiao on Feb 22, 2024

The following worked for me.

I had to create a nodemon.json file in my root directory with the following content:

{
  "verbose": true,
  "ignore": ["node_modules", ".next"],
  "watch": ["server/**/*", "index.js"],
  "ext": "js json"
}

After this, my Next.js app started reloading after any change made in the app.

Version:

"next": "14.1.0" "node": "18.17.0"

Sumansourabh14 on Jan 29, 2024

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

sans-byte on Nov 5, 2023

HMR still not working in Google Chrome or Brave using Next 13.5.6 on Windows 11

patchitodev on Oct 24, 2023

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

Good to know:

Before deciding to use a custom server, please keep in mind that it should only be used when the integrated router of Next.js can’t meet your app requirements. A custom server will remove important performance optimizations, like serverless functions and Automatic Static Optimization.

A custom server cannot be deployed on Vercel.

I’ll be working on my own workaround without a custom server.

Hopefully this helps!

s-fletcher on Jun 25, 2023

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.

JasonA-work on Jun 22, 2023