Webpack module federation breaks with multiple entrypoints

[codepunkt]

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?

1. clone repository
2. ensure you're on branch "dynamic-host-remote"
3. run yarn on repo root
4. go into "dynamic-host-remote" directory
5. run yarn start in "dynamic-host-remote" directory
6. open localhost:3001 in the browser
7. 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
8. OPTIONAL: run yarn build && yarn serve and revisit localhost:3001 to see production build working just fine.

[alexander-akait]

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

[alexander-akait]

Feel free to send a fix

[codepunkt]

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 🤔

[alexander-akait]

/cc @sokra Any ideas on this?

[ScriptedAlchemy]

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",
    }),
  ],

[sokra]

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

[ScriptedAlchemy]

Will take a look, thanks @sokra

[ScriptedAlchemy]

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);
          }
        });