The connection to _next/webpack-hmr was interrupted while the page was loading

Question

Using Next.js - building this

I am porting my app to the next.js framework. Currently, I am re-creating the authentication system, otherwise, this iteration of my app is pretty bare-bones. All of a sudden, after adding my protected routes (Higher Order Components) - not sure if that is related - I started getting this error along with super clunky loading (obviously).

The connection to http://localhost:3000/_next/webpack-hmr was interrupted while the page was loading.

Otherwise, everything works as expected.

I have no idea how to even begin to troubleshoot this sort of thing. Does anyone have any ideas of how I might get a bit more info/insight on this problem? Guidance on how to debug? My next move is to start disconnecting things until it goes away I guess. Any help would be appreciated! Thanks

Answer 1

As per the resolution suggested in https://github.com/zeit/next.js/issues/9776, You can unregister the service worker if you are using CRA.

The following code shows the way to remove registered service worker:

import { unregister } from './serviceWorker'

// ... unregister();

If you have already deployed the registered one, first you to need build this code and deploy again it will deploy with unregistered one. The reason for doing this is because the service worker is registered in your users' browsers if you've used register before. unregister removes it entirely, though. If you build you app again, the main JS bundle will get a new hash, the users will download it, and unregister will remove it for them.

Answer 2

Have had the same issue.

I followed recommendations from various sources I researched and none of them worked. In my case it was an issue in next.config.js file.

More specifically, in my next.config.js file I was including an async generateBuildId function but I left it blank in order to revisit the algorithm at a later stage since the project was in its early stage. After returning a valid buildID from this function the warning disappeared.