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

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.

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.

This usually happens when you are developing the app

The issue might be service work that is getting register to the browser again and again in development mode as the browsers reload fully,

open the Dev tool and check whether a service worker is a registered or not.

if it registers then unregister it, and update your next.config.js so that the service worker will not register again in the browser

I am using "next-pwa" module, below is the check which i have done

  pwa: {    disable: process.env.NODE_ENV === 'development',    register: true,    scope: '/',    dest: 'public',    swSrc: 'service-worker.js',  },