Component modifications are not applied in module federation

I’m having an issue getting react refresh working on a project with module fedration. The ws connection is working, also in the console it seems its working, but the modifications are not applied to the component.

[webpack-dev-server] App updated. Recompiling...
index.js:3210 [webpack-dev-server] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Updated modules:
log.js:24 [HMR]  - ./src/Button.js
log.js:24 [HMR] App is up to date.

I have created an basic example: https://github.com/kabel2/module-federation-examples/tree/feature/example-react-refresh/basic-host-remote

Changing the innertext of the button in the “Button.js” component in “app2” does not apply the changes live, only after reload.

With the old react-hot-loader it seems to work.

[ruanyl]

For anyone who runs into this issue, the solution from @ije and @danieloprado in https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/516 works perfectly for me.

I end up with pnpm patch to patch the package, you can also do it with yarn patch if you’re using yarn.

@pmmmwh would you reconsider applying the changes suggested by @ije and @danieloprado?

[raine]

Does anyone have an example how react-refresh etc. should be loaded on the page in order for hot reload to work?

In my module federation setup, hot reload works occasionally, which suggests there’s some indeterminism going on in the order that scripts are loading on the page.

The suggestion of bundling react-refresh separately, placing it in window and then making it external in MF libs does not seem to work.