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

alesculek · 2022-04-08T22:30:13Z

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?

Clone https://github.com/richardtbell/microfrontend-hello-world
Go into packages/helloReact
run: npm run start, update App.js, see the change in the browser is being propagated
Update the dependencies with the snippet above.
Do the same
The change won't be visible, only after reload
Try to downgrade the dev server to 3.x
Everything will work
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

The text was updated successfully, but these errors were encountered:

alesculek · 2022-04-08T22:47:59Z

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 · 2022-11-20T17:03:24Z

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 · 2023-04-27T13:02:41Z

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 · 2023-04-27T13:05:10Z

Anyone tried to debug this and find the problem?

felixmokross · 2023-04-27T17:42:32Z

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 · 2023-05-02T15:58:13Z

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 · 2023-05-05T14:35:24Z

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 · 2023-05-05T14:40:03Z

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

tony-show · 2023-05-06T09:17:39Z

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 · 2023-05-06T20:49:26Z

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

alexander-akait · 2023-05-06T21:09:14Z

@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 · 2023-05-06T22:38:27Z

@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 · 2023-05-07T12:44:50Z

@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 · 2023-05-08T07:31:22Z

@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 · 2023-05-09T05:34:02Z

Do you really have RemoteComponent in app1?

tony-show · 2023-05-09T08:12:45Z

Do you really have RemoteComponent in app1?

Yes
You can see code of this test example

alexander-akait · 2023-05-18T14:43:26Z

@tony-show Sorry for delay in answers, can I use your repo to check it and what commands do you run (sorry for these stupid questions, there are a lot of issues, so hard to track and remember all of them)?

tony-show · 2023-05-22T09:53:14Z

@tony-show Sorry for delay in answers, can I use your repo to check it and what commands do you run (sorry for these stupid questions, there are a lot of issues, so hard to track and remember all of them)?

Hello Alexander!
Yes, of course you can use this repository! This is a test repository.

tony-show · 2023-05-30T12:40:28Z

@tony-show Sorry for delay in answers, can I use your repo to check it and what commands do you run (sorry for these stupid questions, there are a lot of issues, so hard to track and remember all of them)?

Have any ides for this problem?

alexander-akait · 2023-05-30T12:43:15Z

@tony-show I will look soon, sorry for delay, a lot of issues

anatoly-ivashov · 2023-06-20T07:29:47Z

@alexander-akait Hi! Is there any news about fixing the problem?

alexander-akait · 2023-06-20T18:42:52Z

@anatoly-ivashov No, still in my TODO, try looking at it this week, sorry for delay

anatoly-ivashov · 2023-06-20T20:08:44Z

@alexander-akait Thank you for your answer. I hope you can find some time to find a solution to this problem. Anyway, thanks Alexander, for your contribution to many useful things for it community!

webpack deleted a comment from WangZhenHao Apr 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

alesculek commented Apr 8, 2022 •

edited

alesculek commented Apr 8, 2022 •

edited

LadaBr commented Nov 20, 2022

felixmokross commented Apr 27, 2023 •

edited

alexander-akait commented Apr 27, 2023

felixmokross commented Apr 27, 2023 •

edited

felixmokross commented May 2, 2023

tony-show commented May 5, 2023

alexander-akait commented May 5, 2023

tony-show commented May 6, 2023 •

edited

alexander-akait commented May 6, 2023

alexander-akait commented May 6, 2023 •

edited

tony-show commented May 6, 2023

alexander-akait commented May 7, 2023

tony-show commented May 8, 2023 •

edited

alexander-akait commented May 9, 2023

tony-show commented May 9, 2023 •

edited

alexander-akait commented May 18, 2023

tony-show commented May 22, 2023 •

edited

tony-show commented May 30, 2023

alexander-akait commented May 30, 2023

anatoly-ivashov commented Jun 20, 2023

alexander-akait commented Jun 20, 2023 •

edited

anatoly-ivashov commented Jun 20, 2023

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

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

Comments

alesculek commented Apr 8, 2022 • edited

Bug report

Actual Behavior

Expected Behavior

How Do We Reproduce?

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

alesculek commented Apr 8, 2022 • edited

LadaBr commented Nov 20, 2022

felixmokross commented Apr 27, 2023 • edited

alexander-akait commented Apr 27, 2023

felixmokross commented Apr 27, 2023 • edited

felixmokross commented May 2, 2023

tony-show commented May 5, 2023

alexander-akait commented May 5, 2023

tony-show commented May 6, 2023 • edited

alexander-akait commented May 6, 2023

alexander-akait commented May 6, 2023 • edited

tony-show commented May 6, 2023

alexander-akait commented May 7, 2023

tony-show commented May 8, 2023 • edited

alexander-akait commented May 9, 2023

tony-show commented May 9, 2023 • edited

alexander-akait commented May 18, 2023

tony-show commented May 22, 2023 • edited

tony-show commented May 30, 2023

alexander-akait commented May 30, 2023

anatoly-ivashov commented Jun 20, 2023

alexander-akait commented Jun 20, 2023 • edited

anatoly-ivashov commented Jun 20, 2023

alesculek commented Apr 8, 2022 •

edited

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

alesculek commented Apr 8, 2022 •

edited

felixmokross commented Apr 27, 2023 •

edited

felixmokross commented Apr 27, 2023 •

edited

tony-show commented May 6, 2023 •

edited

alexander-akait commented May 6, 2023 •

edited

tony-show commented May 8, 2023 •

edited

tony-show commented May 9, 2023 •

edited

tony-show commented May 22, 2023 •

edited

alexander-akait commented Jun 20, 2023 •

edited