Webpack module federation breaks with multiple entrypoints

@sokra

This time it's @sokra who told me this is probably the place to open an issue.

Operating System: Windows 10
Node Version: 12.16.2
NPM Version: 6.14.4
webpack Version: 5.0.0-beta.22
webpack-dev-server Version: 3.11.0
Browser: Chrome 84.0.4147.105, Firefox 79.0, Edge 84.0.522.48

This is a bug

Code

https://github.com/codepunkt/module-federation-examples/tree/dynamic-host-remote

Expected Behavior

Using webpack-dev-server instead of webpack should still support module federation with additional content tacked onto the remoteEntry by defining it as an additional entry.

Actual Behavior

Running "yarn start" to start webpack-dev-server breaks module federation and thus breaks the app in development mode.

For Bugs; How can we reproduce the behavior?

clone repository
ensure you're on branch "dynamic-host-remote"
run yarn on repo root
go into "dynamic-host-remote" directory
run yarn start in "dynamic-host-remote" directory
open localhost:3001 in the browser
encounter an error in the browser console that happens when executing app2/remoteEntry.js with the additional contents that were added to this entrypoint by webpack-dev-server
OPTIONAL: run yarn build && yarn serve and revisit localhost:3001 to see production build working just fine.

@webpack-bot

~~@webpack-bot move to webpack/webpack-dev-server~~ My mistake

Feel free to send a fix

If I had a clue what the problem is, i'd send a PR right away. Spent a few hours with this, don't have the slightest idea 🤔

@sokra

/cc @sokra Any ideas on this?

@sokra

Okay, so the issue here is that WDS is likely appending its own entrypoint to the array / injecting a "require" to the hmr client. That typically serves as the entry module of an application. When ModuleFederation emits a remoteEnty with the same name as the entrypoint, they are merged.

This lets us attach initialization code, to federated remotes. something like changing publicPath.

webpack_public_path = new URL(document.currentScript.src).origin + "/";

module-federation/module-federation-examples#277

The remote becomes 400kb big (usually like 5kb) and the module returned to the global is not __webpack_require__("webpack/container/entry/app1"); - therefore window.app1 will not be __webpack_require__("webpack/container/entry/app1"); and the federated API is never set to the global

@sokra i believe that either the WDS entry needs to return the container - which may lead to HMR capabilities? or the WDS entry module should not be applied to federated entry points when combined.

module.exports = {
  entry: {
    app1: "./src/setPublicPath",
    main: "./src/index",
  },
plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        app2: "app2@http://localhost:3002/remoteEntry.js",
      },
      shared: { react: { singleton: true }, "react-dom": { singleton: true } },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],

The wds entrypoint should be prepended instead of appended. The last value is exported.

@sokra

Will take a look, thanks @sokra

Looks like we want to modify this

 const prependEntry = (originalEntry, additionalEntries) => {
      if (typeof originalEntry === 'function') {
        return () =>
          Promise.resolve(originalEntry()).then((entry) =>
            prependEntry(entry, additionalEntries)
          );
      }

      if (typeof originalEntry === 'object' && !Array.isArray(originalEntry)) {
        /** @type {Object<string,string>} */
        const clone = {};

        Object.keys(originalEntry).forEach((key) => {
          // entry[key] should be a string here
          const entryDescription = originalEntry[key];
          if (typeof entryDescription === 'object' && entryDescription.import) {
            clone[key] = Object.assign({}, entryDescription, {
              import: prependEntry(entryDescription.import, additionalEntries),
            });
          } else {
            clone[key] = prependEntry(entryDescription, additionalEntries);
          }
        });

It already prepends... So there is somethings else wrong

@ScriptedAlchemy

@ScriptedAlchemy Hello! Thank you for your reply. Wouldn't you mind sharing a piece of that config where you "fetch all remote URLs on a poll and hash them"? I'm not super aware of how to set up such config in webpack and it sounds a bit difficult to me to implement that so maybe some samples would be really helpful to me to understand that configuration and make live reloading in my case. Thank you again!

Fetch(jsUrl).then(text).then(md5hashFronString)

Store it on some object and put the fetch in a setInterval.

any updates, i face the same issue when use module federation

Since this issue is still open, I'll link to my (pretty damn hacky) "solution" for HMR I posted in another thread: webpack/webpack#11240 (comment)

It's very far from perfect, but it does the job in a pinch

20 October 2023 👀

For CRA, the reason HMR is not working is due to the issue mentioned in #3038 (comment)

The solution would be to override the webpack config using craco or react-app-rewired as follows

const htmlWebpackPlugin = config.plugins.find(
  (plugin) => plugin instanceof HtmlWebpackPlugin
);
htmlWebpackPlugin.options.excludeChunks = ["<specify the value of 'ModuleFederationPlugin.name' here>"];

Correct. The issue is collision in the runtime. Loading the remote of the hot binds to the second chunk loading global and the host no longer gets the refresh updates

Note. Federation v2 supports hmr and fast refresh of remotes as well.
Module-federation.io

@ScriptedAlchemy

@ScriptedAlchemy can you point how do you resolve it?

Which issue?

Hey I am Interested in contributing this issue, How to get started ?

@ScriptedAlchemy

@ScriptedAlchemy sorry if this is OT, but would would the v2 webpack plugin be considered a drop-in replacement for the one currently bundled with webpack itself?

Yes

Try setting publicPath: "auto" in your webpack.config.js. This helps Webpack resolve URLs correctly when using webpack-dev-server, preventing issues with remoteEntry.js.

How to do it:
In your webpack.config.js, update the output section like this:

output: {
publicPath: "auto", // Ensures correct URL resolution
}

This worked for me and might help others facing the same issue. Let me know if it helps or if there's another workaround! 😊

I want to work on this issue? How may i get started? May I work on it @ branch moderators?

Navigation Menu

Repository navigation

Webpack module federation breaks with multiple entrypoints #2692

Code

Expected Behavior

Actual Behavior

For Bugs; How can we reproduce the behavior?

82 remaining items

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Webpack module federation breaks with multiple entrypoints #2692

Description

Code

Expected Behavior

Actual Behavior

For Bugs; How can we reproduce the behavior?

Activity

alexander-akait commented on Aug 3, 2020

alexander-akait commented on Aug 3, 2020

codepunkt commented on Aug 3, 2020

alexander-akait commented on Aug 3, 2020

ScriptedAlchemy commented on Aug 4, 2020

sokra commented on Aug 4, 2020

ScriptedAlchemy commented on Aug 4, 2020

ScriptedAlchemy commented on Aug 4, 2020

sokra commented on Aug 5, 2020

82 remaining items

IgorStetsiuk commented on Feb 22, 2022

ScriptedAlchemy commented on Mar 2, 2022

xujie-phper commented on Aug 11, 2022

rdenman commented on Apr 12, 2023

ssuvorov commented on Oct 20, 2023

tamilarasu602 commented on Dec 20, 2024

ScriptedAlchemy commented on Dec 20, 2024

ScriptedAlchemy commented on Dec 20, 2024

alexander-akait commented on Dec 25, 2024

ScriptedAlchemy commented on Dec 25, 2024

Anubhab2003 commented on Jan 3, 2025

csvan commented on Jan 3, 2025

ScriptedAlchemy commented on Jan 4, 2025

BilalAhmedMalik1 commented on Apr 3, 2025

Jeston10 commented on Jan 25, 2026

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions