Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hot reload not working at latest version of Next.js #51162

Closed
1 task done
jarvislin94 opened this issue Jun 12, 2023 · 75 comments · Fixed by #68622
Closed
1 task done

Hot reload not working at latest version of Next.js #51162

jarvislin94 opened this issue Jun 12, 2023 · 75 comments · Fixed by #68622
Labels
bug Issue was opened via the bug report template. locked

Comments

@jarvislin94
Copy link

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

@jarvislin94 jarvislin94 added the bug Issue was opened via the bug report template. label Jun 12, 2023
@kelvinsekx
Copy link

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
Screenshot (68)
Screenshot (66)

@JasonA-work
Copy link

@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
Copy link

kelvinsekx commented Jun 22, 2023

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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

Looking for any kind of feedback

@weyert
Copy link

weyert commented Aug 14, 2023

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
Copy link

meds commented Aug 19, 2023

@weyert not working for me as of 13.4.19

@McAndersC
Copy link

McAndersC commented Aug 20, 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
Copy link

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
Copy link
Member

leerob commented Aug 24, 2023

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

@McAndersC
Copy link

McAndersC commented Aug 25, 2023

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
Copy link

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

@sandrinjoy
Copy link

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
Copy link

paaauldev commented Aug 28, 2023

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
Copy link

ko-lem commented Aug 29, 2023

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
Copy link

Tommoore96 commented Sep 6, 2023

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
Copy link

louisgv commented Oct 6, 2023

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
Copy link

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

@jayantbh
Copy link

jayantbh commented Oct 24, 2023

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
Copy link

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

@isimmons

This comment has been minimized.

@patchitodev
Copy link

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
Copy link

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
Copy link

showduhtung commented Nov 9, 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

@Skippou
Copy link

Skippou commented Nov 13, 2023

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
Copy link

WesleyKapow commented Apr 25, 2024

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
Copy link

CassWindred commented Apr 25, 2024

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
Copy link

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
Copy link

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

@normdoow
Copy link

normdoow commented Jun 1, 2024

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
Copy link

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
Copy link

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
Copy link

Same for me: assetPrefix breaks hot reload.

@MdSadiqMd
Copy link

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
Copy link

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
Copy link

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
Copy link

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

@devjiwonchoi
Copy link
Member

@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
Copy link
Member

@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
Copy link

@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
Copy link

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

@jamesryan-dev
Copy link

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
Copy link
Member

@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
Copy link

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
Copy link
Member

devjiwonchoi commented Aug 19, 2024

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

// 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
Copy link

metclan commented Sep 10, 2024

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>

Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked
Projects
None yet