Next.js: HMR of next.config.js is broken for all examples using server.js

[Yzrsah]

note: This issue is specifically for HMR of next.config.js requiring a server restart.

Bug report

The next.js/examples using server.js do not HMR next.config.js

To Reproduce

• Use one of the examples which includes a server.js
• Modify next.config.js while server is running
• HMR does not occur

Expected behavior

HMR of next.config.js

System information

• OS: macOS, Windows, Linux
• Version of Next.js: 8.0.1

[marlonicus]

+1 for this.

We have a fairly simple custom server, not too different from the examples, and when making a code change the console will display _"[HMR] bundle rebuilding"_. The network shows requests for both the update check, and the patched component, and both look correct to me.

http://localhost:3000/_next/static/webpack/51255de6f7bd9c29505b.hot-update.json:

{"h":"9160ba30e149d0ed69d9","c":{"static/development/pages/index.js":true}}

http://localhost:3000/_next/static/webpack/static/development/pages/index.js.51255de6f7bd9c29505b.hot-update.js:

webpackHotUpdate("static/development/pages/index.js",{
/***/ "./src... 
[expected updated source] 

But it will just hang on _"[HMR] bundle rebuilding"_ and never apply the changes.

[elishaterada]

+1

HMR has suddenly stopped working for existing and new projects across different next.js versions. Perhaps one of the dependencies released an update that is causing this issue for any new npm installation of next.js?

[timneutkens]

@marlonicus @elishaterada this issue has nothing to do with HMR of pages, it's aimed at changing next.config.js requiring a server restart.

Please provide a clear and concise reproduction in a new issue. Preferably in a repository.

[elishaterada]

@timneutkens you are right this wasn't the HMR about the page changes, I will see if there is a similar report.

[timneutkens]

@elishaterada I'm not aware of a similar report, so you can create a new issue, we need a reproduction to be able to debug this issue though 🙏 Thank you!

[samanmohamadi]

HMR has suddenly stopped working for existing and new projects across different next.js versions.

I have the same issue.
@marlonicus @elishaterada do you find any solution?
my project stucked and it's hard to investigate the cause.

[timneutkens]

@samanmohamadi this issue has nothing to do with HMR of pages, it's aimed at changing next.config.js requiring a server restart. I'm not aware of a similar report, so you can create a new issue, we need a reproduction to be able to debug this issue though 🙏 Thank you!

[dreamthink]

@marlonicus Seeing something similar here. I make changes and save them, and will see the console log "[HMR] bundle rebuilding", but only the changes prior to the save are rendered, so I'm one save behind.

[timneutkens]

@dreamthink this issue has nothing to do with HMR of pages, it's aimed at changing next.config.js requiring a server restart. I'm not aware of a similar report, so you can create a new issue, we need a reproduction to be able to debug this issue though 🙏 Thank you!

FYI I'm not a robot, I just keep repeating myself for the third time 😅

[timneutkens]

Once again we'd be super happy to look into these issues! But they're impossible to debug from our side if you don't provide a reproduction.

[marlonicus]

@samanmohamadi @dreamthink - Afraid I haven't found a solution. I've checked out the example custom server projects, and it looks like HMR _is_ working for them. So I believe the title of this issue is incorrect and the problem likely lies on my end (as per usual).

@timneutkens I'll hopefully have a stab at putting together a reproduction of the issue this week; although I suspect that if I manage to narrow it down that far, I'll probably figure out what is causing the issue in the first place.

[marlonicus]

Looks like @dfvalero and @dmitweb have narrowed down the issue and provided a temporary fix:
https://github.com/zeit/next.js/issues/6497

[Yzrsah]

@marlonicus This issue is specifically for HMR of next.config.js requiring a server restart.

[marlonicus]

🤦‍♂️ Oh right... You'd think I might have figured that out by now based off @timneutkens comments.

[ajhool]

Is this also affecting everybody's production deployments? My Links are no longer working and I can't figure out why.

I see the same thing as @marlonicus in my dev environment. After deploying I no longer see any console output (as would be expected), and I do see a successful network request for my page (eg, about.js), but nothing changes on my screen.

I would say that there's a broader issue of the HMR not providing any debug hooks. It's nice when it works but incredibly frustrating to deal with when it doesn't work.

[ajhool]

@timneutkens

Unfortunately, they're difficult to debug from our side, too, because there is such little debug output from within the nextjs / nowjs packages. I'm seeing the same issues as @marlonicus , my routing is not working, and I have absolutely no information about what's going on & no clear way to enable verbose logging from next or now

[timneutkens]

I would say that there's a broader issue of the HMR not providing any debug hooks. It's nice when it works but incredibly frustrating to deal with when it doesn't work.

Well it's incredibly hard to even know what that would entail, as there really is no way to tell what issue you're running into without having a reproduction. If we have a reproduction it'd be easier to add debug output, if at all needed. We have a super extensive test suite covering HMR, and the only issues I've seen come up with HMR recently are either around customizing the next.config.js and adding plugins (next-css has one issue I believe).

What logging would you like specifically?

We'd be super happy to look into any issues, a reproduction would be a tremendous help though, as we still have no idea what you're doing in your app that causes HMR to not work.

[samanmohamadi]

in my case, removing all imported CSS files fix the issue.
I have removed all import path/to/style.css and put all those files in head section of parent page:

<Head>
<link href="static/style.css" rel='stylesheet' />
</Head>

[ajhool]

The current amount of information that we have is:

1. Next: "[HMR] bundle rebuilding"
2. Network request
3. Compilation on the server-side (successful)
4. 200 Network response
5. Nothing happens and no output from HMR

In addition to that, the issue I made in #6554 means that step no. 3 takes a really long time, which makes it even more difficult to track down the bug.

Well it's incredibly hard to even know what that would entail, as there really is no way to tell what issue you're running into without having a reproduction.

That's so untrue, there are many ways to debug code without reproductions, although I agree that nextjs' design choices make reproductions the only way to debug (that's not a good thing). Most bugs from other frameworks (react, apollo, mui, etc.) don't require a reproduction case because those frameworks output debug logging information or enough clues to get you on track. Needing to do a full reproduction to isolate a bug is really rare in my experience, especially for a full framework with complex integrations

Desirable debug output would be something like (I don't know the intimates of HMR so I'm mostly guessing -- that's why I'm using next):

HMR is retrieving "about.js"
HMR is requesting hot-reloader.json
HMR received hot-reloader.json
HMR is applying updates
HMR failed to update [Error code: ]

There are also clues that might help to isolate the issue.

Things that do work:

1. Requesting /about directly by entering the url into the browser (that works)

1. a next/Link with as=/some-page/hello and href=/some-page?param="hello" does work (while a Link with /about does not work)

Things that don't work:

1. a next/Link with href=/about

[Yzrsah]

@ajhool

Even without reproductions I agree and you are right about needing more debug information.

HMR is retrieving "about.js"
HMR is requesting hot-reloader.json
HMR received hot-reloader.json
HMR is applying updates
HMR failed to update [Error code: ]

The only problem is that it's "noisy" and there's no extendedDebugOutput mode to enable extra debug info output. But 'noisy' should not be a legit reason to hold back on solving an issue.

Since this issue is reoccurring and can be caused by third parties, it may be more helpful to solve it with comprehensive error reporting instead of fixing single issues.

Maybe extendedDebugOutput is a valid feature request to consider.

[Timer]

We've removed this feature and have added a warning that is printed to the console that tells you that you must reboot the server yourself.

[DominicTobias-b1]

in my case, removing all imported CSS files fix the issue.
I have removed all import path/to/style.css and put all those files in head section of parent page:

<Head>
<link href="static/style.css" rel='stylesheet' />
</Head>

So random, thanks this fixed next rebuilding the app on every link click :/ Though not sure how to handle linking to node_modules CSS from the <Head>?