reactjswebpack-module-federationwebpack-hmrhmrrspack

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


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:

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.


Solution

  • 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.