Add example with HMR

[Ivan-Parushev]

Hi,

I have spend quite some time trying to configure module federation to work with HMR, however, with no success. No matter what kind of configuration I try the results is always the same:

remoteEntry.js:989 Uncaught TypeError: Cannot read property 'push' of undefined
at self.webpackHotUpdateplatform (remoteEntry.js:989)
at main.52ee0b798cefc4bb4013.hot-update.js:9
self.webpackHotUpdateplatform @ remoteEntry.js:989
(anonymous) @ main.52ee0b798cefc4bb4013.hot-update.js:9

Update failed: ChunkLoadError: Loading hot update chunk main failed.
(missing: http://localhost:3001/main.52ee0b798cefc4bb4013.hot-update.js)
at http://localhost:3001/main.js:1829:26
at new Promise ()
at loadUpdateChunk (http://localhost:3001/main.js:1824:20)
at http://localhost:3001/main.js:2253:29
at Array.forEach ()
at Object.webpack_require.hmrC.jsonp (http://localhost:3001/main.js:2248:22)
at http://localhost:3001/main.js:1416:45
at Array.reduce ()
at http://localhost:3001/main.js:1412:53

remoteEntry.js:985 Uncaught TypeError: Cannot set property './src/pages/CMS.tsx' of undefined
at self.webpackHotUpdateplatform (remoteEntry.js:985)
at src_pages_CMS_tsx-webpack_sharing_consume_default_react_react-webpack_sharing_consume_default-843145.52ee0b798cefc4bb4013.hot-update.js:9

A simple example how to do it will be much appreciated.

Thank you!

[SevdalinZhelyazkov]

I have faced this problem as well on one of my latest POCs. Still haven't figured out a working config. I hope someone else would bring some light in the tunnel. 👍

[ScriptedAlchemy]

working on it, its extremely complex. We will eventually roll support for it into webpack 5 but its a monster to achieve

[ScriptedAlchemy]

Cross container hmr will be releases in 5.1 or 5.2. Live reload works for the client side. Server side prod hmr is harder but there's a few easy patterns once might be able to leverage.

[davekiss]

@ScriptedAlchemy I'm guessing this is still unavailable (ref: https://webpack.js.org/blog/2020-12-08-roadmap-2021/#hot-module-replacement-for-module-federation) but curious if any progress has been made here?

[zedford]

Cross container hmr will be releases in 5.1 or 5.2. Live reload works for the client side. Server side prod hmr is harder but there's a few easy patterns once might be able to leverage.

@ScriptedAlchemy Do you happen to have a solution/example for single-container hmr right now? I experience the same issue as the OP with a single one.

This seems to suggest it's possible.

[wdfinch]

Same issue here. Any updates?

[ruanyl]

In my case, I noticed that in index.html, both the main chunk and remoteEntry.js are injected. But it seems remoteEntry.js is not needed and it's actually causing HMR to fail.

If I configured HtmlWebpackPlugin to only load main chunk: chunks: ['main']. It seems everything just works fine.

Is that remoteEntry.js needed by a single-container app running as a host? @ScriptedAlchemy

[zedford]

In my case, I noticed that in index.html, both the main chunk and remoteEntry.js are injected. But it seems remoteEntry.js is not needed and it's actually causing HMR to fail.

If I configured HtmlWebpackPlugin to only load main chunk: chunks: ['main']. It seems everything just works fine.

Is that remoteEntry.js needed by a single-container app running as a host? @ScriptedAlchemy

@ruanyl If you don't "expose" anything in the ModuleFederationPlugin config then HMR works - I believe because that remoteEntry.js isn't generated. So host-only modules are hmr friendly.

[ruanyl]

@zedford My point is when the container has exposes, and remoteEntry.js is generated. But this remoteEntry.js seems should not be injected into the index.html of the current app, that's my assumption.

Because if I only inject main chunk, everything just works. And the main chunk can load whatever remotes it needs by itself, the remoteEntry.js emitted by the current container seems not required when I run the current app standalone.

[ScriptedAlchemy]

yes you dont need to inject a hosts own remote unless you depend on the pattern - typically I only consume the hosts own remote in prod builds for advanced things like worker threads and MF

Excluding the remote chunk from HTML will / should solve it - you can vote for HMR on MF at webpack https://webpack.js.org/vote/

I have a number of points and have already traded a lot of influencer points to bump it up the list