Reactjs 控制台错误([HMR] 等待来自 WDS 的更新信号..)

Question

我努力解决这个出现在chrome控制台中的错误。 似乎是一个网络包错误..但是在哪里解决它

[HMR] Waiting for update signal from WDS...

Answer 1

1. 转到node_modules->webpack->hot 文件夹。

2. 在此之下，您将找到一个日志.js文件打开该 编辑部分(在if(level === "info")下注释日志(

   module.exports = function(level, msg){
   > comment start here
   if (shouldLog(level)) {
   if (level === "info") {
   console.log(msg);
   } else if (level === "warning") {
   console.warn(msg);
   } else if (level === "error") {
   console.error(msg);
   }
   }
   > comment end here
   };
   

有关更多信息： 反应脚本 3.3.0/3.3.1 -> [HMR] 正在等待来自 WDS 的更新信号...在控制台中(Edge 仍然无法正常工作(#8153

Answer 2

正如在对问题的评论中发布的那样，这不是错误。这也不是警告。

它只是让您知道，在开发过程中，当浏览器听到您所做的更改时，您的网页将自动重新加载("热重载"(。一切顺利，这是您保存对源文件的更改的时候。

创建网站的生产版本时不应显示它(在准备部署网站时应执行此操作，因为生产版本中对许多内容进行了优化(。

所以控制台消息[HMR] Waiting for update signal from WDS...只是意味着浏览器正在侦听来自 Webpack 开发服务器的任何更改，以便它可以执行热模块替换。

如果您按照其他答案中的建议注释掉日志代码，则会干扰第三方代码库，并且它将阻止以后可能导致问题的其他日志记录。

我将其添加为答案，因为此答案重定向到此处，即使那里的答案更好，而此处的其他答案禁用了重要资源。

Answer 3

您可以从控制台中删除它

[HMR] Waiting for update signal from WDS...

你可以去日志.js文件，该文件存在于node_modules->webpack->hot文件夹中 在该文件夹下，您将找到一个日志.js文件 现在你必须使用ctrl+/评论下面的部分.--

// if (shouldLog(level)) {
//  if (level === "info") {
//      console.log(msg);
//  } else if (level === "warning") {
//      console.warn(msg);
//  } else if (level === "error") {
//      console.error(msg);
//  }
// }

所以现在你的函数将看起来像——

module.exports = function(level, msg) {
// if (shouldLog(level)) {
//  if (level === "info") {
//      console.log(msg);
//  } else if (level === "warning") {
//      console.warn(msg);
//  } else if (level === "error") {
//      console.error(msg);
//  }
// }
};

为了确保它正常工作，只需再次运行npm start它就会从控制台中删除。

Answer 4

它是相关的HMS。似乎您正在使用自定义反应模板。您需要找到您的 webpack 配置文件并检查开发服务器配置选项。我在这里附上了一个链接，它将向您展示如何启用HMS。让我知道它是否有效。 https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr

Answer 5

请在 App.js 中查看您的路线。 当我从 React 17 降级到 16 时，这种情况发生在我身上，因为 17 与 16 使用的几个包不兼容。

问题是我忘了在 16 中将路由改回渲染。所以在工作之前必须将"元素"更改为"组件"。