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

Posted 2023-02-22

【中文标题】页面加载时与 _next/webpack-hmr 的连接中断

【英文标题】：The connection to _next/webpack-hmr was interrupted while the page was loading

【发布时间】：2018-01-06 07:08:48

【问题描述】：

使用 Next.js - 构建this

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

与http://localhost:3000/_next/webpack-hmr 的连接在页面加载时中断。

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

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

【问题讨论】：

这发生在 Firefox 而不是 Chrome

是的，我在 firefox 而不是 chrome 中得到这个错误，我想知道是什么原因造成的。

here你可以找到一些解决方法，但不是官方解决方案。

这个问题解决了吗？

动态导入发生在我身上，我删除了动态导入，错误消失了。

【参考方案1】：

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

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

import unregister from './serviceWorker'

// ... unregister();

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

【参考方案2】：

遇到过同样的问题。

我遵循了我研究过的各种来源的建议，但都没有奏效。就我而言，这是 next.config.js 文件中的问题。

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

【参考方案3】：

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

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

打开开发工具，查看 Service Worker 是否已注册。

如果它注册然后取消注册，并更新你的 next.config.js 以便服务工作者不会在浏览器中再次注册

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

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