Reactjs 控制台错误（[HMR] 等待来自 WDS 的更新信号...）答案

【问题标题】：Reactjs console error ([HMR] Waiting for update signal from WDS...)Reactjs 控制台错误（[HMR] 等待来自 WDS 的更新信号...）
【发布时间】：2020-01-11 14:00:37
【问题描述】：

我很难解决这个出现在 chrome 控制台中的错误。似乎是一个 webpack 错误.. 但在哪里解决它

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

【问题讨论】：

我认为该消息不是错误。它来自您正在使用的服务器的热重载功能。我认为它会告诉您，如果您在后端更改文件，它将自动在浏览器中重新加载应用程序。这有利于发展。对于生产来说可能不太酷。

标签： reactjs

【解决方案1】：

转到 node_modules -> webpack -> 热文件夹。

在它下面你会发现一个 log.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
};

【讨论】：

控制台日志在此之后不起作用，控制台没有记录
此答案会干扰第三方代码并删除可能有价值的资源。请参阅下面的stackoverflow.com/a/70862970/5552415。

【解决方案2】：

您可以从控制台中删除它

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

你可以去 node_modules -> webpack -> hot 文件夹中的 log.js 文件找到一个 log.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，它将从控制台中删除。

【讨论】：

【解决方案3】：

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

它只是让您知道，在开发过程中，当浏览器听到您正在进行的更改时，您的网页将自动重新加载（“热重新加载”）。一切顺利，此时您可以保存对源文件的更改。

它不应在您创建网站的生产版本时出现（您应该在准备部署网站时执行此操作，因为生产版本中已优化了许多内容）。

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

如果您按照其他答案中的建议注释掉日志代码，则表示您正在干扰第三方代码库，这将阻止其他可能导致以后出现问题的日志记录。

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

【讨论】：

【解决方案4】：

是相关的HMS。好像您正在使用自定义反应模板。你需要找到你的 webpack 配置文件并检查 dev-server 配置选项。我在此处附加了一个链接，它将向您展示如何启用 HMS。让我知道它是否有效。 https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr

【讨论】：

【解决方案5】：

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

问题是我忘了在 16 中将渲染的路线改回。所以在它起作用之前必须将“元素”更改为“组件”。

【讨论】：