Hot reload not working at latest version of Next.js

[jarvislin94]

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

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 on Windows, ensure you move your next folders or app to the home <your_name>:/home$ directory.

In fact, it has nothing to do with NextJs in my case. The next app was in the mnt/c <your_name>:/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

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

[WesleyKapow]

For me I had server rendering errors ReferenceError: document is not defined (had to use next/dynamic to import it to fix the error). Once I fixed the server side rendering error, fast reload worked correctly again. So make sure you don't have any errors in your server logs!

[CassWindred]

So I'm having the same problem and it's definitely a WSL2 thing for me - it works fine from Powershell but Powershell bad, I have copied the project into my WSL2 home dir so no symlinks and identical files.

I'm on the latest version of NextJS and Node, both instances function identically except that when run from WSL2 it seems not to watch or hot-reload any saved changes, requiring a full stop and restart every time. I guess I'll put up with having to use Powershell for now but would be great if there was a way to solve this.

I started on NextJS 13.5 and Node 16 but have updated each thing independently and tested across both environments, as well as trying all the applicable solutions given in this thread, but HMR continues to fail - accessing pages for the first time after a reload always produces the log Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload.

I'm pretty sure our code is not the issue here given that it works fine when run in Windows over WSL.

[robMolloy]

I found a strange bug that seems related - hopefully this helps someone.

I was importing components from Flash.tsx. I used the syntax export * from "./flash"; (notice lowercase 'f' not 'F').

This didn't throw any errors and seemed to all be working fine other than the hot reload.

[edwinveldhuizen]

It looks like this MR broke it when using assetPrefix:
#59471

[normdoow]

HMR is failing for me even when starting out with a fresh next app.

npx create-next-app@latest

I haven't changed anything other than testing a text change to test HMR.

next: 14.2.3
node: 20.14.0
npm: 10.7.0

Have to restart the next server npm run dev to see any changes. What a drag!

[Oliver-Turp]

This is happening to me too. It's not every time but it's enough of the time to make it really annoying and slow down my productivity!

next: 14.2.3
npm: 10.8.1
node: 20.11.1

I was coding on other projects 2 weeks ago and it was working fine. Took a weeks break then came back this week and it's not working...

[electricBonfire]

It looks like this MR broke it when using assetPrefix: #59471

I can confirm this is what is causing the issue on my end. If I comment out assetPrefix from next.config.js the hot reloading works.

When inspecting the network the websocket (/_next/webpack-hmr) never connects with assetPrefix in place.

[jessephelps]

Same for me: assetPrefix breaks hot reload.

[MdSadiqMd]

Just in case you are using WSL2 then change your project path to \home directory that means if your project is present in path /mnt/c/Users/your-username/your-project change it to linux \home directory by creating a folder in it say mkdir -p ~/projects and then move a copy of your project linux file system by using command mv /mnt/c/Users/your-username/your-project ~/projects/ then navigate to the project by cd ~/projects/your-project and open this instance in vs code by using command code . and run the code by npm run dev

This worked for me hope it worked for you too

[nsturdivant]

I can confirm that, after either commenting out assetPrefix or setting assetPrefix to undefined, HMR starting working for me locally. For additional context, I came across this issue thread while troubleshooting HMR for a Sitecore XM Cloud head application.

Node: 20.14.0
npm: 10.7.0
Next.js: 14.1.0
Sitecore JSS: 22.0.0

Also worth a read: https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix.

[ThanhHung2112]

For WSL2, some case you cd to path home/UserName/win-home/Desktop .... but the project stills working at /mnt/c/... path. Create the project at /home/Username/PJ_folder/ will solve this.

[andrei9669]

encountered same issue, setting assetPrefix to undefined in dev mode solved it

[devjiwonchoi]

@jarvislin94 Could not find a valid reproduction, please reopen with repro if the issue is still ongoing, I'll prioritize and take a look. Thank you!

@andrei9669 @nsturdivant @ThanhHung2112 For those who are having issue with the assetPrefix, #67983 did the fix, so please try out the latest canary.

Note

An assetPrefix set to a full URL e.g. CDN should be only used in Prod.
x-ref: https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix

[devjiwonchoi]

@ThanhHung2112 @MdSadiqMd @CassWindred @kelvinsekx
Just to confirm, all WSL2 issue in this thread is about path difference right?
Is there anything I need to dig in on that related to Next.js?

[kelvinsekx]

@ThanhHung2112 @MdSadiqMd @CassWindred @kelvinsekx Just to confirm, all WSL2 issue in this thread is about path difference right? Is there anything I need to dig in on that related to Next.js?

It has nothing to do with NextJS so don't dig it I would say.

If you are working with WSL2, work in your home directory. In fact, for other projects that isn't Next related, I encountered same experience, and switching paths did justice.

[MdSadiqMd]

@devjiwonchoi Yes my comment specify to move the application to native path(WSL2) nothing more than that with respect to my comment

[jamesryan-dev]

Same for me - upgrading from next 12 -> next 14.. Hot Reloading stopped working

Commenting out assetPrefix line in my next.config.js fixes hot reloading..

[devjiwonchoi]

@jamesryan-dev Hey, I'd really love to take a look at your case.
Have you set the CDN url (e.g. https://cdn.example.com) to your assetPrefix?
Or is it the http://localhost:port?

[jamesryan-dev]

Hi @devjiwonchoi we are not using CDN

Here is our, now working config:

  // Set assetPrefix to our public URL
  // Checking for inDevelopment as '/' breaks Hot Module Reloading if used during development
  assetPrefix: inDevelopment ? undefined : '/',

[devjiwonchoi]

@jamesryan-dev Hey, thanks for reporting. In your case, setting assetPrefix as '/' breaking HMR was a valid bug.
It was fixed at #68518 by this specific code:

next.js/packages/next/src/shared/lib/normalized-asset-prefix.ts

Lines 5 to 9 in 6266149

	// if an assetPrefix was '/', we return empty string
	// because it could be an unnecessary trailing slash
	if (!escapedAssetPrefix) {
	return ''
	}

This fix was released to the canary version v15.0.0-canary.107, and will going to be added to the next available stable version. Once again, thank you for reporting your case!

Also, if you are not using the development "phase" you can use in next config, feel free to check it out to replace your inDevelopment value.

x-ref: https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix#set-up-a-cdn
x-ref: https://nextjs.org/docs/app/api-reference/next-config-js#phase

[metclan]

Actually mine wasn't working because i was using group routes in next js.

So in one of the route layout, I didn't include the html and body element.
Before

<section>
 {children}
</section>

After

<html>
 <body>
  <section>
    {children}
  </section>
 </body>
</html>

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.