Hot Module Replacement '[HMR] Waiting for update signal from WDS...' forever, how to enable Hot Module Replacement?

Question

Hot Module Replacement '[HMR] Waiting for update signal from WDS...' forever, how to enable Hot Module Replacement or send signal from Webpack Dev Server?

I want Hot Module Replacement be enabled. Therefore, I set hot: true in webpack.config.js.

I stuck at

[HMR] Waiting for update signal from WDS...

I expected to see

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.

I tried webpack serve --hot --inline command, but I got nothing...

webpack.config.js

// Paths
const path = require('path');
const srcPath = path.join(__dirname, 'src');
const distPath = path.join(__dirname, 'dist');
const publicPath = path.join(__dirname, 'public');

// Plugins...

// Modules
module.exports = {
  mode: 'development',
  entry: path.join(srcPath, 'index.tsx'),
  output: {
    path: distPath,
    filename: 'bundle.js',
  },
  module: {
    rules: [
      // TypeScript
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
  },
  // resolves...
  devServer: {
    contentBase: distPath,
    historyApiFallback: true,
    hot: true,
    inline: true,
    writeToDisk: true
  },
  // plugins...

.babelrc

// .babelrc
{
    "presets": [
        "@babel/preset-env", 
        "@babel/preset-react",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "react-hot-loader/babel"
    ]
}

App.tsx
I use 'react-hot-loader'.

import { hot } from 'react-hot-loader/root';

// some codes

export default hot(App);

if I change code 'webpack-dev-server' shows

i ｢wdm｣: Compiling...
./src/App.tsx 1.62 KiB [built] [code generated]
i ｢wdm｣: Compiled successfully.

Here is package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.19.5",
    "@types/react": "^16.9.56",
    "@types/react-dom": "^16.9.9",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "typescript": "^4.0.5",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "webpack serve",
    "build": "webpack",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "@babel/preset-typescript": "^7.12.7",
    "@hot-loader/react-dom": "^17.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.3.2",
    "fork-ts-checker-webpack-plugin": "^6.0.3",
    "html-webpack-plugin": "^5.0.0-alpha.14",
    "image-minimizer-webpack-plugin": "^1.0.0",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.1",
    "imagemin-svgo": "^8.0.0",
    "raw-loader": "^4.0.2",
    "react-hot-loader": "^4.13.0",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "ts-loader": "^8.0.11",
    "url-loader": "^4.1.1",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}

Answer 1

There's a bug https://github.com/webpack/webpack-dev-server/issues/2758 when using browserslist with webpack-dev-server and webpack 5 at the moment, you can set target: 'web' to work around the issue until webpack-dev-server v4 is out.