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

Question

所以我为我的 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>
  );
}

和我的.babelrcconf：

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

Answer 1

我在[HMR] Waiting for update signal from WDS...使用webpack5webpack-dev-sever和browserslist.

browserslist与webpack5 一起使用时，这似乎是一个错误，webpack-dev-sever正如chenxsan here所回答的那样。可以在此处找到有关该错误的更多信息。

解决方案（目前）是添加target: 'web'到 webpack 配置中。例子：

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

Answer 2

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

disableHostCheck: true

到我的 webpackdevServer配置，它起作用了（请注意，这只是一种解决方法）。

而且我不知道为什么在 Windows 10 中没有错误消息（在我从 win7 启动我的应用程序后，控制台正在发送垃圾邮件 Invalid Host/Origin header

Answer 3

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