页面加载时与_next/webpack-hmr的连接被中断

Question

使用 Next.js - 构建 this

我正在将我的应用程序移植到

next.js

框架。目前，我正在重新创建身份验证系统，否则，我的应用程序的这次迭代非常简单。突然间，在添加受保护的路由（高阶组件）后 - 不确定这是否相关 - 我开始收到此错误以及超级笨重的加载（显然）。

页面加载时，与

http://localhost:3000/_next/webpack-hmr

的连接中断。

否则，一切都会按预期进行。

我什至不知道如何开始解决此类问题。有谁知道我如何获得有关此问题的更多信息/见解？指导一下如何调试？我的下一步行动是开始断开连接，直到它消失为止。任何帮助，将不胜感激！谢谢

Answer 1

根据https://github.com/zeit/next.js/issues/9776中建议的解决方案，如果您使用的是 CRA，则可以取消注册 Service Worker。

以下代码展示了删除注册的 Service Worker 的方法：

import { unregister } from './serviceWorker'

// ...
unregister();

如果您已经部署了注册的代码，首先您需要构建此代码并再次部署，它将使用未注册的代码进行部署。这样做的原因是，如果您之前使用过 register，则 Service Worker 已在用户的浏览器中注册。不过，注销会完全删除它。如果您再次构建应用程序，主 JS 包将获得一个新的哈希值，用户将下载它，取消注册将为他们删除它。

Answer 2

也遇到过同样的问题。

我遵循了我研究的各种来源的建议，但没有一个起作用。就我而言，这是 next.config.js 文件中的问题。

更具体地说，在我的 next.config.js 文件中，我包含了一个异步generateBuildId函数，但我将其留空，以便在稍后阶段重新访问该算法，因为该项目还处于早期阶段。从此函数返回有效的 buildID 后，警告消失了。

Answer 3

我的两分钱：这发生在我使用 Firefox 时，连接到

localhost

； 同样的错误：

The connection to http://localhost:9009/__webpack_hmr 
  was interrupted while the page was loading.

具体来说，我正在运行

start-storybook -p 9009 -s public

，但这实际上与问题无关。

---

我解决了在 Firefox 首选项中清除缓存的 Web 内容和站点数据的问题：

Answer 4

这对于 Websockets 或 SocketIO 来说是一个挑战。您的应用程序中运行的配置或设置可能不正确。删除导入或获取正确的配置。

Answer 5

这通常发生在您开发应用程序时

问题可能是当浏览器完全重新加载时，服务工作会在开发模式下一次又一次地注册到浏览器，

打开Dev工具，检查Service Worker是否已注册。

如果它注册了，则取消注册它，并更新您的 next.config.js 以便 Service Worker 不会在浏览器中再次注册

我正在使用“next-pwa”模块，下面是我所做的检查

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