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

[ScriptedAlchemy]

Module-federation/fmr plugin released

[wdfinch]

Hi @ScriptedAlchemy that's awesome. I'm sorry but could you provide some more details on the post above or a link? I don't see an example added on the homepage or any docs that say HMR has been added to webpack.

[ScriptedAlchemy]

It's on npm, plug-in myself and the federation group wrote. Search module-federation/fmr and it should come up.

Official support still unavailable from webpack.

[wdfinch]

I see thanks so much for doing this! Is this compatible with react fast refresh? In other words, is there any way we could use the plugin you made and this fast refresh plugin together?

[norman-ags]

I see thanks so much for doing this! Is this compatible with react fast refresh? In other words, is there any way we could use the plugin you made and this fast refresh plugin together?

Hi @wdfinch, did you find a way to do this?

[wdfinch]

Not yet. I haven't tried though. It's not urgent for me since it's just a dev convenience. 

[ScriptedAlchemy]

We could track the current host and maybe enable it for the host. But there is no hot reloading for MF. So closest we can get is live reloading the page when you update a federated module

[vjpr]

I'm seeing the same issue with a host and one remote.

Two webpack runtimes are being loaded. One in the host index.js bundle, and one in the remote'sremoteEntry.js bundle. They both define self.webpackHotUpdate.

self["webpackHotUpdate"] = (chunkId, moreModules, runtime) => {
	for(var moduleId in moreModules) {
		if(__webpack_require__.o(moreModules, moduleId)) {
			currentUpdate[moduleId] = moreModules[moduleId];
			if(currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId);
		}
	}
	if(runtime) currentUpdateRuntime.push(runtime); // <---- ERROR HERE. currentUpdateRuntime is undefined.
	if(waitingUpdateResolves[chunkId]) {
		waitingUpdateResolves[chunkId]();
		waitingUpdateResolves[chunkId] = undefined;
	}
};

var currentUpdateChunks;
var currentUpdate;
var currentUpdateRemovedChunks;
var currentUpdateRuntime;

xxx.hot-update.js calls self.webpackHotUpdate.

It is calling the second self.webpackHotUpdate that hasn't had its currentUpdateRuntime initialized.

It seems that the host is handling the update websocket message, but then the injected hot-reload script is always calling the remote's hot update runtime.

---

In the example i see that it is called self.webpackHotUpdatehost...maybe this bug was fixed in a later version.

---

Code that appends here: https://github.com/webpack/webpack/blob/f43047c4c2aa4b0a315328e4c34a319dc2662254/lib/config/defaults.js#L778-L782

---

I resolved the host error by simply adding output.uniqueName.

Answer was actually in the FAQ here: https://webpack.js.org/concepts/module-federation/#collision-between-modules-from-different-remotes

But now I am faced with the error when running my remote that has an exposes property, same as is mentioned in this thread.

index.js and remoteEntry.js both have the same webpackHotUpdateremote name, but it needs to be different.

---

So the exact setting to name the webpackHotUpdate function is output.hotUpdateGlobal. Here is where it is rendered:

https://github.com/webpack/webpack/blob/4a0937fdd0701793a6546f8670e3eed5e552ae50/lib/web/JsonpChunkLoadingRuntimeModule.js#L320-L322

Just need to rename this when generating our remoteEntry.js.

---

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

This was the fix!

[Ballpin]

Encountered same issue on React 18. Use chunks main as mentioned abov.

For the other error with createRoot error that comes after i followed https://github.com/pmmmwh/react-refresh-webpack-plugin according to React Team they have some version of HMR built in. This works for custom webpack configs.

[caitlinChang]

Encountered same issue on React 18. Use chunks main as mentioned abov.

For the other error with createRoot error that comes after i followed https://github.com/pmmmwh/react-refresh-webpack-plugin according to React Team they have some version of HMR built in. This works for custom webpack configs.

Hi, I met the same problem, how did you solve this problem with createRoot?

[Ballpin]

Encountered same issue on React 18. Use chunks main as mentioned abov.
For the other error with createRoot error that comes after i followed https://github.com/pmmmwh/react-refresh-webpack-plugin according to React Team they have some version of HMR built in. This works for custom webpack configs.

Hi, I met the same problem, how did you solve this problem with createRoot?

It depends on your setup. I don't remember exactly but i think i was using webpack-hot-middleware. example in "using webpack-hot-middleware example"

[SiddHyper]

Why this is closed??