Hot reload not working at latest version of Next.js

[JackZong]

Verify canary release

• [X] 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

1. npx create-next-app@latest (next-tw)
2. yarn install
3. 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

[kelvinsekx]

I am facing the same problem with the next blog example template: npx create-next-app --example blog my-blog

Even when I downgrade my next version to 13.4.0v, it still doesn't work. I am using exactly what the template gave me without making any changes.

So I can image the kind of frustrations others who might have used this must have faced.

Here is my package and folder tree

[JasonA-work]

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

[kelvinsekx]

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.

[JasonA-work]

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.

[s-fletcher]

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!

[eashish93]

Yes custom server is the problem hot reload not working with latest next.js version. But it's a requirement as middleware doesn't support node runtime.

[jd-carroll]

If anyone is using a custom server for https support only, take a look at #53926

Looking for any kind of feedback

[weyert]

Looks like its working in canary build? The 13.4.14-canary.5 versions seems to solve my issues regarding not compiling or detecting file changes.

[meds]

@weyert not working for me as of 13.4.19

[McAndersC]

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]

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?

[leerob]

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

[McAndersC]

Okey this process has gotten me into great confusion. When checking next versions.

next-info:

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.13.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.19
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

I have tried with @latest and 13.4.20-canary.4 version with the same result as described.

next-info from a version that works:

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.13.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.2
      eslint-config-next: 13.4.2
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

I will say that my current reproduction is just getting @latest and try to edit a page and add not-found.js

[lazarevartur]

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

[sandrinjoy]

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.

[paaauldev]

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

Worked for me. In the last version 13.4.19 I have also bugs with DOM interacting, so I downgrade to this version and all working fine.

[ko-lem]

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.

[Tommoore96]

I think one thing that might be linked is parallel routes & route groups, I say that because when scouring for solutions I found a Youtuber mention the same problem when he was trying to fix a parallel route problem by adding route groups to it.

I'm in such a manic rush trying to get things done I don't have to to make a reproduction but I hope this helps. If it doesn't help give me a nudge and I'll try and reproduce it next week.

Here's a clip from the aforementioned Youtuber: https://youtube.com/clip/Ugkx37KNnn58pAcfnDyL4_AyVYzJeAk3Lzpr?si=8DihFvLcu6ORMCXd

EDIT: I updated next and node versions to latest and now the problem only happens with server actions. The server actions do not update unless I refresh the entire server.

[louisgv]

I can confirm using route groups with different runtime per group (edge vs node) will break HMR. We have 3 groups, 1 using edge and 2 using node, and neither has HMR.

[pelachile]

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

[jayantbh]

Mine is a similar issue. Everything works fine, except Hot Reload.

Tested with the following versions of stuff

Thing	Version
Chrome	116
MacOS	13
Node	16.17.0 and 18.16.1
Yarn	1.22.19
Next	13.4.19 and 13.5.6

Custom HTTP2 server / server.js code

const next = require('next');

const fs = require('node:fs');
const h2 = require('node:http2');
const { parse } = require('node:url');
const dev = process.env.NODE_ENV !== 'production';
const httpsOptions = {
  key: fs.readFileSync('./local-certificates/localhost.key'),
  cert: fs.readFileSync('./local-certificates/localhost.crt')
};

const hostname = 'localhost';
const port = 3000;

// [A] I've tried it with and without `experimentalHttpsServer`
const app = next({ dev, hostname, port, experimentalHttpsServer: true });
const handle = app.getRequestHandler();

// [B] I've tried it with and without `app.getUpgradeHandler`
const upgradeHandler = app.getUpgradeHandler();

const server = h2.createSecureServer(httpsOptions);

app.prepare().then(() => {
  // Refer to comment [A]
  server.on('upgrade', upgradeHandler);

  server.on('error', (err) => {
    if (err) throw err;
  });
  server.on('request', (req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  });
  server.listen(3000, () =>
    console.info('> Server started on https://localhost:3000')
  );
});

Errors I've encountered, which are probably related:

Server side error

 ⨯ uncaughtException: Error: read ECONNRESET
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:217:20)
    at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
  errno: -54,
  code: 'ECONNRESET',
  syscall: 'read'
}

Browser side error

WebSocket connection to 'wss://localhost:3000/_next/webpack-hmr' failed: 
init @ websocket.js:81

[patchitodev]

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

[isimmons]

Here's what's happening for me.

Windows 10 Chrome next v 13.5.6 node v 18.12.0 fresh project created with npx create-next-app@latest

Shows compiled but no HMR.

Same on 13.5.5 but downgrading to 13.5.4 fixed it for me.

[patchitodev]

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!

[sans-byte]

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

[showduhtung]

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

[Skippou]

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

[NunoGomes-dev]

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: #57046 (comment)

@leerob Can u provide us more info on this? I have the same issue. It seems that using both pages and app directory on Next v13.5.4 (tested in the next v14 and it happens as well) with some css/scss files imported on layout or at a client component with some context providers causes a full reload of the app after saving any change in the code.

Waiting for feedback/any fix on this.

[leonardorb]

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.

[pavelsavva]

I had the same issue because I was accidentally exporting async component from a page with the 'use client'; directive. Everything started working after I removed the async keyword.