加载页面时，与_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，则可以取消注册服务工作者。

以下代码显示了删除已注册的服务工作者的方法：

import { unregister } from './serviceWorker'

// ... unregister();

如果您已经部署了已注册的代码，则首先需要构建此代码，然后再次部署它将使用未注册的代码进行部署。这样做的原因是，如果您以前使用过register，则服务工作者是在用户的浏览器中注册的。不过，取消注册会将其完全删除。如果您再次构建您的应用程序，主JS包将获得新的散列，用户将下载它，取消注册将为他们删除它。

Answer 2

都有同样的问题。

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

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

Answer 3

在开发应用程序时通常会发生这种情况

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

打开Dev工具，查看某个服务工作者是否已注册。

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

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

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