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

Question

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

25

所以我正在为我的React应用程序设置最小配置，并且在控制台上面遇到了这个 [HMR] Waiting for update signal from WDS... 的消息，但是我的浏览器页面没有反映出任何更改。

根据这个解决方案，我已经尝试添加了@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 文件配置如下:

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

- Oscar

只需使用此链接：https://facebook.github.io/create-react-app/docs/getting-started 它会处理一切。 - user5734311

1

@ChrisG 我想从头开始设置 :) - Oscar

9个回答

11

好的，显然这个问题是导致了这个问题。我添加了。

disableHostCheck: true

我调整了webpack的devServer配置，它可以工作了（需要注意这只是一个解决方法）。

我不知道为什么在Windows 10上没有错误信息（但在我从Win7引导应用程序后，控制台会不断输出Invalid Host/Origin header）。

- Oscar

对我也起作用了。你找出核心问题了吗？在我的情况下，应用程序独立运行正常，但最终我要将其移植到CRM中，因此在开发过程中，我必须引用localhost:8080/dist/app.js来获取功能和HMR。对于我的其他项目来说都很好用...这个不确定怎么回事。如果您有任何其他见解，请告诉我。谢谢！ - user1447679

1

这行代码需要添加在哪里？ - Sravan Kumar

@SravanKumar 我记得 webpack.config.js 是关于编程的。 - Oscar

@Oscar，你能告诉我你的邮箱吗？我有一些想要澄清的疑问。我是React的初学者。 - Sravan Kumar

1

在webpack v4中，这已被allowedHosts：'all'取代。 - JoeTidee

6

拥有这种错误可能意味着您有一种递归，即在组件内部导入自身。这可能发生在代码重构期间。

- Alf Moh

2

最初的回答：

希望这能帮助到某些人。

我遇到了这个问题，显然它的原因是有一些iframe的src属性设置为"/blank.html"，我通过添加代理来解决了这个问题。

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

- John

0

清除并替换节点模块：

我的REACT项目控制台显示“等待WDS更新信号…”，然后每个模块都找不到。

对我有效的方法是在终端中使用以下两行代码删除并重新安装我的节点模块。然后我的应用程序又可以正常工作了。

rm -rf node_modules
yarn install (or npm install)

- Sean

0

所以，如果您使用 Firebase 作为后端，这是我的情况。您可能已经 超过了每日限额 ，因此，您可能无法读取/写入或访问任何将使用 firebase 的组件。

由于这个原因，在控制台中不断收到 [HMR] Waiting for update signal from WDS... 。您可能已经禁用了警告（这也是我的情况），因此您将看不到该警告。

- shaswat.dharaiya

0

对于在Angular中遇到此错误的人，在我的情况下，问题是我同时使用--live-reload false和--hmr。因此，ng serve --live-reload false --hmr将无法工作。

- Vahid

0

在我的情况下，这是由于代码中的语法错误引起的。检查你的代码是否存在未被注意到的错误。

- North Gork

-1

我认为删除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.）。祝你好运！

- Angel Cochache

1

你好，欢迎来到SO！请阅读如何撰写优秀答案。尝试添加一些关于你的答案相比已被接受的答案更好或不同之处的注释！ - Pascal Lamers

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Calsal · Accepted Answer

我曾经遇到过相同的问题，使用webpack 5、webpack-dev-server和browserslist时卡在了[HMR] Waiting for update signal from WDS...。这里有人回答说，这似乎是使用browserslist与webpack 5和webpack-dev-sever时出现的bug。更多关于该bug的信息可以在这里找到。

解决方案（暂时）是将target: 'web'添加到webpack配置中。例如：

// webpack.config.js

module.exports = {
  devServer: {
    hot: true
  },
  target: 'web',
  mode: 'development',
  [...]
}