Hot Module Replacement (HMR) not working with rspack and federated modules

Question

I've tried to get HMR to work with rspack and federated modules and I have failed many times.

Some of the errors I was having:

• 404 for http://localhost:3000/federation_provider.d845fd82334c3e1b.hot-update.json
• Infinite reloading
• hmr / hot options not changing anything inside the rsbuild config

I have scoured github issues, documentation, but this fix wasn't suggested anywhere, so hopefully creating this question & answering it myself will help someone in the future.

Tried changing the configuration (hmr: true).

Tried hacky workarounds (file watchers).

Tried https://github.com/pmmmwh/react-refresh-webpack-plugin.

Answer 1

What finally worked is configuring a different port for the provider module.

Before, both websockets connections were established at localhost:2000 (since that was where the host module was running).

Added the client config inside the provider module's rsbuild.config.ts:

export default defineConfig({
  plugins: [pluginReact()],
  server: {
    port: 3000,
  },
  dev: {
    assetPrefix: true,
    client: { // <------- This part made it work
      host: 'localhost',
      port: '3000',
      protocol: 'ws',
    },
  },

Now, the websockets are started at different ports and HMR is working as expected, and a page reload is no longer needed.