Hot reload doesn't work in 4.x with ModuleFederationPlugin

[alesculek]

Bug report

Webpack dev server doesn't perform the hot reload properly in conjunction with ModuleFederationPlugin in v4.x but works in v3.x

Actual Behavior

When I set up a simple project using those dependencies:

{
    "name": "test",
    "version": "1.0.0",
    "scripts": {
        "start": "webpack serve --config=config/webpack.dev.js",
        "build": "webpack --config=config/webpack.prod.js"
    },
    "dependencies": {
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0"
    },
    "devDependencies": {
        "@babel/core": "^7.17.9",
        "@babel/plugin-transform-runtime": "^7.17.0",
        "@babel/preset-env": "^7.16.11",
        "@babel/preset-react": "^7.16.7",
        "babel-loader": "^8.2.4",
        "clean-webpack-plugin": "^4.0.0",
        "html-webpack-plugin": "^5.5.0",
        "webpack": "^5.71.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.8.1",
        "webpack-merge": "^5.8.0"
    }
}

I manage to startup my application, I can't see any errors but when I update the source code, the update is not propagated into the browser and the change is visible ONLY after the full reload.

When I downgrade back to 3.x everything works smoothly.

I used this repository as reference: https://github.com/richardtbell/microfrontend-hello-world

Since this repository was quite older, I wanted to update to the latest version of all packages, the only issue I had was with the webpack-dev-server as I mentioned above.

Expected Behavior

A SPA is HOT reloaded as expected

How Do We Reproduce?

1. Clone https://github.com/richardtbell/microfrontend-hello-world
2. Go into packages/helloReact
3. run: npm run start, update App.js, see the change in the browser is being propagated
4. Update the dependencies with the snippet above.
5. Do the same
6. The change won't be visible, only after reload
7. Try to downgrade the dev server to 3.x
8. Everything will work
9. OR: keep 4.x and remove the ModuleFederationPlugin from the webpack config and the hot reload will work again

Please paste the results of npx webpack-cli info here, and mention other relevant information

❯ npx webpack-cli info

  System:
    OS: macOS 12.3
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 29.45 MB / 16.00 GB
  Binaries:
    Node: 14.17.2 - ~/.nvm/versions/node/v14.17.2/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.6.0 - ~/.nvm/versions/node/v14.17.2/bin/npm
  Browsers:
    Brave Browser: 99.1.36.119
    Chrome: 100.0.4896.75
    Safari: 15.4
  Packages:
    babel-loader: ^8.2.4 => 8.2.4
    clean-webpack-plugin: ^4.0.0 => 4.0.0
    html-webpack-plugin: ^5.5.0 => 5.5.0
    webpack: ^5.71.0 => 5.72.0
    webpack-cli: ^4.9.2 => 4.9.2
    webpack-dev-server: ^4.8.1 => 4.8.1
    webpack-merge: ^5.8.0 => 5.8.0

[alesculek]

Update:

I'm also getting this error message:

Uncaught TypeError: Cannot set properties of undefined (setting './src/App.js')
    at self.webpackHotUpdatetest (remoteEntry.js:1155:39)
    at src_bootstrap_js.1a6c7b3ebe42c99bbf18.hot-update.js:10:29

This happens only if the App react component has other dependencies (in this case the history), if it does not, there is NO message in the logs.

If I open this in chrome, I can see those lines there:

**/ 		self["webpackHotUpdatetest"] = (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);
/******/ 			if(waitingUpdateResolves[chunkId]) {
/******/ 				waitingUpdateResolves[chunkId]();
/******/ 				waitingUpdateResolves[chunkId] = undefined;
/******/ 			}
/******/ 		};

where the problematic one seems to be:

currentUpdate[moduleId] = moreModules[moduleId];

[LadaBr]

I also experience this issue. It happens only when MFE exposes some script. Temporary solution is setting FAST_REFRESH=false in .env file. But page will be reloaded after each change.

[felixmokross]

We are experiencing the same issue.

Falling back to FAST_REFRESH=false however is also not working for us. If I add the ModuleFederationPlugin, the page no longer reloads upon changes (although it shows the Compiling... message in the console).

But we anyway need hot module replacement as we have complex in-memory state which would get lost upon page reload.

[alexander-akait]

Anyone tried to debug this and find the problem?

[felixmokross]

I digged a bit deeper now. It's still not clear to me where the problem is exactly. I see that messages are exchanged via the websocket and I see that the modules still are reloaded, even with the ModuleFederationPlugin enabled. When debugging, it seems to me that the modules are replaced (hard to judge for me though as I'm not familiar with the webpack dev server code base). When I check the module source in the browser, I also see the updated code.

I think the issue might be rather that React somehow doesn't manage to re-render the respective components. So the problem would rather be in the React Refresh plugin, which is used by CRA 5. But not yet sure about it. Will have another look tomorrow.

[felixmokross]

For us, it turned out to be this issue in the React Refresh webpack plugin, which comes with CRA: pmmmwh/react-refresh-webpack-plugin#394 I don't see this plugin in the repro steps of the op, so this might be a separate issue.

Workaround for us is to opt-into Module Federation when starting the dev server (via a command line arg), so that most developers are not impacted by this when developing the standalone application. When consuming a component via Module Federation, Fast Refresh doesn't work anyway, so we are not losing anything.

[tony-show]

Hi everyone!
Also encountered this problem on a basic webpack configuration with module federation.
webpack-dev-server gives an error on changes (video with error):
https://disk.yandex.ru/i/Ty_O0lUay3lzvA

How can a fix it?

[alexander-akait]

Try to enable https://webpack.js.org/configuration/optimization/#optimizationruntimechunk

[tony-show]

Try to enable https://webpack.js.org/configuration/optimization/#optimizationruntimechunk

Thanks, but it doesn't work right.

This only works in microfronts where there are no remotes. But where remotes are specified, the page reloads infinitely. (video demo):
https://disk.yandex.ru/i/-E5A1LpdhNIn7w

And screenshots:

[alexander-akait]

You have a lot of hot entrypoint on an one page, sounds like something wrong with your setup

[alexander-akait]

@tony-show Can you create a small reproducible example with your configuration and code (no need to provide all code, only piece for an example), this will give me a better look

[tony-show]

@tony-show Can you create a small reproducible example with your configuration and code (no need to provide all code, only piece for an example), this will give me a better look

https://github.com/tony-show/module-federation-example

[alexander-akait]

@tony-show How you run it? You can't use name: "" for your packages, it should be always an unique name, shorty - it seems webpack is thinking your build is one (becaise chunk loading method is not unique), alternatively you can set output.uniqueName(https://webpack.js.org/configuration/output/#outputuniquename) for each compiler

[tony-show]

@tony-show How you run it? You can't use name: "" for your packages, it should be always an unique name, shorty - it seems webpack is thinking your build is one (becaise chunk loading method is not unique), alternatively you can set output.uniqueName(https://webpack.js.org/configuration/output/#outputuniquename) for each compiler

After adding the uniqueName property with a unique name for each microfrontend application, those with the remotes setting in Module Federation now have a remoteEntry.js load error, although the file is available. Well and the page displays a white screen.

[alexander-akait]

Do you really have RemoteComponent in app1?