Can't set up the HMR: stuck with "Waiting for update signal from WDS..." in console

Question

So I'm setting up a minimal configuration for my React app, and I faced that [HMR] Waiting for update signal from WDS... message in console and my browser page doesn't reflect any changes

According to this solution I had tried to add @babel/preset-env, but it had no success. And I don't think that it's the root of the problem, since even if I change my index.js file, no changes applied in the browser

My 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>
  );
}

and my .babelrc conf:

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

Answer 1

I had the same issue being stuck at [HMR] Waiting for update signal from WDS... while using webpack 5, webpack-dev-sever and browserslist.

It seems to be a bug when using browserslist with webpack 5 and webpack-dev-sever as answered by chenxsan here. More info about the bug can be found here.

The solution (for now) is to add target: 'web' to the webpack config. Example:

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