Question

因此，我正在为我的React应用设置最低配置，我遇到了控制台中的[HMR] Waiting for update signal from WDS...消息，并且我的浏览器页面没有反映任何更改

根据this解决方案，我曾尝试添加@babel/preset-env，但没有成功。而且我认为这不是问题的根源，因为即使我更改了index.js文件，浏览器中也没有更改

我的webpack.config.js：

const { HotModuleReplacementPlugin } = require('webpack');

module.exports = {
  mode: 'development',
  devServer: {
    watchContentBase: true,
    publicPath: '/dist/',
    hot: true
  },
  plugins: [new HotModuleReplacementPlugin()],
  module: {
    rules: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

src/index.js：

import React from 'react';
import { render as r } from 'react-dom';
import App from './App';

r(<App />, document.querySelector('#root'));

src/App.jsx：

import React from 'react';

export default function App() {
  return (
    <div>
      <h1>Hello from React Version: {React.version}</h1>
    </div>
  );
}

和我的.babelrc conf：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Answer 1

我在使用 [HMR] Waiting for update signal from WDS... 5、webpack 和 webpack-dev-sever 时遇到了同样的问题。

将 browserslist 与 browserslist 5 和 webpack 用作 answered by chenxsan here 时，这似乎是一个错误。可以在 here 中找到有关该错误的更多信息。

解决方案（目前）是将 webpack-dev-sever 添加到 webpack 配置中。示例：

target: 'web'

Answer 2

出现此错误可能意味着您有一个递归，即将其内部导入一个组件。在代码重构期间可能会发生这种情况。

Answer 3

好吧，显然this是导致问题的原因。我加了

disableHostCheck: true

到我的webpack devServer配置中，它可以正常工作（请注意，这只是一种解决方法）。

我也不知道为什么Windows 10中没有错误消息（从Win7启动我的应用程序后，控制台出现Invalid Host/Origin header垃圾邮件

Answer 4

这可以帮助某人。

我遇到了这个问题，显然是导致我的问题的原因是使用带有src =“ / blank.html”的iframe，我通过添加代理解决了该问题

proxy: {
    '/*.html': {
        target: 'https://something.else',
        changeOrigin: true
    }
}

Answer 5

擦拭和更换节点模块：我的REACT项目控制台显示“正在等待来自WDS的更新信号……”，然后找不到每个模块。

对我有用的是用我的终端中的这两行删除并重新安装我的节点模块。然后我的应用程序再次工作。

rm -rf node_modules
yarn install (or npm install)

Answer 6

因此，如果您使用 Firebase 作为后端，我的情况就是这种情况。您可能用完了每日配额，因此，您可能无法读取/写入甚至访问将使用 Firebase 的任何组件。

因此，我在控制台中不断收到 [HMR] Waiting for update signal from WDS...。您可能禁用了警告（在我的情况下也是如此），并且您不会看到该警告。

Answer 7

就我而言，这是由我的代码中的语法错误引起的。检查您的代码是否存在未被注意到的错误。

Answer 8

我认为删除 node_modules 不是最好的选择。我相信大多数 node_module 都带有旧版本的 webpack，这意味着我们需要更新新版本 TIPS（如果您采取使用 webpack-dev-middleware 而不是 webpack-dev-server 的路线，请使用 webpack-hot-middleware 包在您的自定义服务器或应用程序上启用 HMR。）附件中请阅读链接以在 HMR webpack 上更好地实现 (https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr.) 祝你好运！

无法设置HMR：卡在控制台中的“正在等待来自WDS的更新信号...”

8 个答案: