HMR at Module Federation

[ckken]

module-federation/module-federation-examples#358

[ckken]

esbuild & swc is work,babel throw error

[ruanyl]

The root cause of HMR not working when doing module federation is that the remoteEntry.js is included in the index.html by default.

Check out the comment here: module-federation/module-federation-examples#358 (comment)
And here: module-federation/module-federation-examples#358 (comment)

To fix the problem, only include the chunks that you need in HtmlWebpackPlugin. In emp's case, it will be chunks: ['index']

[ckken]

The root cause of HMR not working when doing module federation is that the remoteEntry.js is included in the index.html by default.

Check out the comment here: module-federation/module-federation-examples#358 (comment)
And here: module-federation/module-federation-examples#358 (comment)

To fix the problem, only include the chunks that you need in HtmlWebpackPlugin. In emp's case, it will be chunks: ['main']

is there demo?

[flyyuan]

remark

[ruanyl]

@ckken So just add this to HtmlWebpackPlugin args

chunks: ['index']

[ckken]

no work: https://github.com/efoxTeam/emp/blob/094c1136419eca75571be721bb9aba40b9d82ba9/packages/emp-cli/webpack/config/plugin.js#L71

[flyyuan]

me too. no work

[ruanyl]

Could chunks override somewhere? What I'm doing is just use emp-cli to create a react project, and I add it to emp-config.js. And also the name of the chunk depends on your entry in your config.

  config.plugin("html").tap((args) => {
    args[0] = {
      ...args[0],
      ...{
        title: "EMP REACT BASE",
        files: {},
        chunks: ["index"],
      },
    };
    return args;
  });

And it works fine for me as you can see in the screenshot, the HMR is working.

[flyyuan]

your page had an update after HMR?

[ruanyl]

@flyyuan For sure, that's the whole point, isn't it?

[ckken]

hmr main problem in module federation when project expose some modules, when you haven't expose, hmr is work!

[ruanyl]

@ckken Yeah, but that's the symptom. Have you checked my comment on the other issue I linked above? module-federation/module-federation-examples#358 (comment)

So when you have exposed modules, ModuleFederationPlugin generates remoteEntry.js for you(file name is based on the config). And by default, all js assets will be injected to index.html, including remoteEntry.js.
But remoteEntry.js is not needed when running the current application. It's only required by the other federated applications which refer to it via remotes.

[ckken]

@ckken Yeah, but that's the symptom. Have you checked my comment on the other issue I linked above? module-federation/module-federation-examples#358 (comment)

So when you have exposed modules, ModuleFederationPlugin generates remoteEntry.js for you(file name is based on the config). And by default, all js assets will be injected to index.html, including remoteEntry.js.
But remoteEntry.js is not needed when running the current application. It's only required by the other federated applications which refer to it via remotes.

yes,I saw~ but the error is not caused here

[ruanyl]

@ckken Alright, so you're referring to some other issue. I see you link the issue here, I thought it might be the same issue I encountered.

[ckken]

fixed it in @efox/emp-cli 1.8.26 may be!?

[ckken]

hot reload for react update @efox/emp-react to v1.1.6

[ckken]

fix it in https://github.com/efoxTeam/emp/tree/v1.9.x