search

webpack / webpack-dev-server

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
MIT License
7.8k stars 1.44k forks source link

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

Open alesculek opened 2 years ago

alesculek commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Anyone tried to debug this and find the problem?

felixmokross commented 1 year ago

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 commented 1 year ago

For us, it turned out to be this issue in the React Refresh webpack plugin, which comes with CRA: https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/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 commented 1 year ago

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 commented 1 year ago

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

tony-show commented 1 year ago

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: image image

alexander-akait commented 1 year ago

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

alexander-akait commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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.

image

image

image

alexander-akait commented 1 year ago

Do you really have RemoteComponent in app1?

tony-show commented 1 year ago

Do you really have RemoteComponent in app1?

Yes You can see code of this test example

image

alexander-akait commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

anatoly-ivashov commented 1 year ago

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

alexander-akait commented 1 year ago

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

anatoly-ivashov commented 1 year ago

@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!

kujtimprenku commented 4 months ago

Did anyone manage to get this sorted? - It seems to happen when the host-app exposes anything.

WangZhenHao commented 4 months ago

Did anyone manage to get this sorted? - It seems to happen when the host-app exposes anything.

image

I commented that switching to using Vite might solve your current preblom, But the Administrator deleted my comments. why?

kujtimprenku commented 4 months ago

Did anyone manage to get this sorted? - It seems to happen when the host-app exposes anything.

image

I commented that switching to using Vite might solve your current preblom, But the Administrator deleted my comments. why?

Thanks for the reply, unfortunately, switching to another bundler is not an option for this project I'm working on. Since this happens only on host-app (shell) and we rarely change it, I can live with that.

igorpodosonov commented 2 months ago

A temporary workaround that has worked for me involves disabling HMR and enabling live reloading. You can adjust your devServer configuration as follows:

devServer: {
  hot: false, // Disable hot module replacement
  liveReload: true, // Enable full page reloads when changes are detected
}