[解決済み] HMRの設定ができない：コンソールで「WDSからの更新信号待ち...」と表示される

質問

そこで、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"]
}

解決方法は？

OK どうやら これ が問題を引き起こしています。そこで

disableHostCheck: true

を私のウェブパックに devServer を設定したらうまくいきました（あくまで回避策であることに注意してください）。

そして、なぜwindows10でエラーメッセージが出なかったのか、全く分かりません（win7からアプリを起動した後、コンソールに Invalid Host/Origin header