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

【问题标题】：The connection to _next/webpack-hmr was interrupted while the page was loading页面加载时与 _next/webpack-hmr 的连接中断
【发布时间】：2018-01-06 07:08:48
【问题描述】：

使用 Next.js - 构建this

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

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

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

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

【问题讨论】：

这发生在 Firefox 而不是 Chrome
是的，我在 firefox 而不是 chrome 中得到这个错误，我想知道是什么原因造成的。
here你可以找到一些解决方法，但不是官方解决方案。
这个问题解决了吗？
动态导入发生在我身上，我删除了动态导入，错误消失了。

标签： reactjs next.js mobx

【解决方案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',
  },

【讨论】：