webpack-dev-server: Hot reload doesn't work in 4.x with ModuleFederationPlugin

Bug report

Webpack dev server doesn’t perform the hot reload properly in conjunction with ModuleFederationPlugin in v4.x but works in v3.x

Actual Behavior

When I set up a simple project using those dependencies:

{
    "name": "test",
    "version": "1.0.0",
    "scripts": {
        "start": "webpack serve --config=config/webpack.dev.js",
        "build": "webpack --config=config/webpack.prod.js"
    },
    "dependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0"
    },
    "devDependencies": {
        "@babel/core": "^7.17.9",
        "@babel/plugin-transform-runtime": "^7.17.0",
        "@babel/preset-env": "^7.16.11",
        "@babel/preset-react": "^7.16.7",
        "babel-loader": "^8.2.4",
        "clean-webpack-plugin": "^4.0.0",
        "html-webpack-plugin": "^5.5.0",
        "webpack": "^5.71.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.8.1",
        "webpack-merge": "^5.8.0"
    }
}

I manage to startup my application, I can’t see any errors but when I update the source code, the update is not propagated into the browser and the change is visible ONLY after the full reload.

When I downgrade back to 3.x everything works smoothly.

I used this repository as reference: https://github.com/richardtbell/microfrontend-hello-world

Since this repository was quite older, I wanted to update to the latest version of all packages, the only issue I had was with the webpack-dev-server as I mentioned above.

Expected Behavior

A SPA is HOT reloaded as expected

How Do We Reproduce?

1. Clone https://github.com/richardtbell/microfrontend-hello-world
2. Go into packages/helloReact
3. run: npm run start, update App.js, see the change in the browser is being propagated
4. Update the dependencies with the snippet above.
5. Do the same
6. The change won’t be visible, only after reload
7. Try to downgrade the dev server to 3.x
8. Everything will work
9. OR: keep 4.x and remove the ModuleFederationPlugin from the webpack config and the hot reload will work again

Please paste the results of npx webpack-cli info here, and mention other relevant information

❯ npx webpack-cli info

  System:
    OS: macOS 12.3
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 29.45 MB / 16.00 GB
  Binaries:
    Node: 14.17.2 - ~/.nvm/versions/node/v14.17.2/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.6.0 - ~/.nvm/versions/node/v14.17.2/bin/npm
  Browsers:
    Brave Browser: 99.1.36.119
    Chrome: 100.0.4896.75
    Safari: 15.4
  Packages:
    babel-loader: ^8.2.4 => 8.2.4
    clean-webpack-plugin: ^4.0.0 => 4.0.0
    html-webpack-plugin: ^5.5.0 => 5.5.0
    webpack: ^5.71.0 => 5.72.0
    webpack-cli: ^4.9.2 => 4.9.2
    webpack-dev-server: ^4.8.1 => 4.8.1
    webpack-merge: ^5.8.0 => 5.8.0