Module Federation: Remotes try to load chunks from domain of the host

[antons1]

We are working on replacing two older web apps with a new one, and our new app uses module federation in a micro frontend setup. Now, we want to load some micro frontends into the old apps that we are replacing, so that we can gradually replace old functionality with new.

The setup is as follows:
Old App - A React monolith where we want to replace parts with micro frontends form the new app
New App:

• Shell/main: App shell that is responsible for loading the shared context for the different micro frontends
• Common: Contains shared components such as react hooks that are needed by several micro frontends
• Economy: The micro frontend that contains an invoice overview that we want to import into the Old App

In the New App, the setup is as follows: There is one micro frontend per page in the app, which contains an entry point that will load Main. Main will then load the correct micro frontend based on the URL. This means that all micro frontends expect to run in the context of Main, so that they have access to the different functions exposed by main.

In the Old App, we load Main and Common, and wrap the old app in a provider that will add the necessary shared context. Then, if a user goes to old.app/economy, we load the economy component, and render it on the page.

This setup works, except for one caveat:
Once the remoteEntry.js scripts for Common, Main and Economy are loaded into the Old App, the remotes try to load chunks for their dependencies, from the URL of the host. Let's say the old app is running on localhost.old.app:3000, and economy is running on localhost.new.app:3001/economy. the Old App loads, and loads localhost.new.app:3001/economy/remoteEntry.js just fine, but then will try to load dependencies from localhost.old.app:3000/economy, where they obviously don't exist.

jsonp chunk loading:30 Uncaught (in promise) ChunkLoadError: Loading chunk 999 failed.
(error: http://localhost.old.app:3000/economy/999.c43a85a7f11b81877b05.js)
while loading "./core" from webpack/container/reference/economy
    at Object.i.f.j (http://localhost.new.app:3001/economy/remoteEntry.js:1:7915)
    at http://localhost.new.app:3001/economy/remoteEntry.js:1:1147
    at Array.reduce (<anonymous>)
    at Function.i.e (http://localhost.new.app:3001/economy/remoteEntry.js:1:1125)
    at Object../core (http://localhost.new.app:3001/economy/remoteEntry.js:1:212)
    at o (http://localhost.new.app:3001/economy/remoteEntry.js:1:371)
    at handleFunction (http://localhost.old.app:3000/runtime.js:327:31)
    at onInitialized (http://localhost.old.app:3000/runtime.js:339:73)
    at http://localhost.old.app:3000/runtime.js:329:65
    at async Promise.all (index 0)

which is caused by GET http://localhost.old.app:3000/economy/999.c43a85a7f11b81877b05.js net::ERR_ABORTED 404 (Not Found)

I have no idea why this is happening.

Module federation config for Old App (acting as host):

{
    name: "OldApp",
    filename: "remoteEntry.js",
    remotes: {
      main: `shell@http://localhost.new.app:3001/shell/remoteEntry.js`,
      common: "common@http://localhost.new.app:3001/shell/remoteEntry.js",
      economy: `economy@http://localhost.new.app:3001/economy/remoteEntry.js`
    },
    exposes: {
    },
    shared: [
      {
        react: {
          requiredVersion: deps.react,
          singleton: true,
          eager: true
        }
      },
      {
        "react-dom": {
          requiredVersion: deps["react-dom"],
          singleton: true,
          eager: true
        }
      },
      { "react-router-dom": { requiredVersion: deps["react-router-dom"], singleton: true, eager: true } },
      { "@company/styleguide": { requiredVersion: deps["@company/styleguide"], singleton: true, eager: true } }
    ]
  }

Module federation config for Economy (acting as remote):

{
      name: "economy",
      library: { type: "var", name: "economy" },
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/Economy",
        "./core": "./src/core",
        "./router": "./src/router",
      },
      remotes: {
        common: "common",
      },
      shared: [
        { react: { requiredVersion: deps.react, singleton: true } },
        {
          "react-dom": { requiredVersion: deps["react-dom"], singleton: true },
        },
        "react-router-dom",
        "@company/styleguide",
        "@apollo/client",
      ],
    }

Module federation config for Main (acting as host in the New App, but as a remote in the Old App):

{
      name: "shell",
      filename: "remoteEntry.js",
      remotes: {
        menu: "menu",
        economy: "economy",
        common: "common",
        //... a bunch of other micro frontends
      },

      exposes: {
        "./App": "./src/App",
        "./clientServiceNames": "./src/clientServiceNames",
        "./hooks": "./src/hooks",
        "./ExternalProvider": "./src/ExternalProvider" // <-- The one that is imported by Old App
      },
      shared: [
        { react: { requiredVersion: deps.react,  } },
        {
          "react-dom": {
            requiredVersion: deps["react-dom"],
          },
        },
        "react-router-dom",
        { "@company/styleguide": {requiredVersion: deps["@company/styleguide"], singleton: true } },
        "@apollo/client",
      ],
    }

ExternalProvider from Main is imported into Old app this way: const ExternalProvider = React.lazy(() => import("main/ExternalProvider"));, and used like this:

<React.Suspense fallback={"Laster..."}>
    <ExternalProvider organizationId={organizationId} requestSignIn={() => console.log("Log in!")} token={token}>
        <Route path="/" component={Layout} />
    </ExternalProvider>
</React.Suspense>

If I set up a proxy in webpack-dev-server that proxies /economy to localhost.new.app:3001, everything works as it should.
Any ideas for what is wrong? Thanks in advance!

[XiaofengXie16]

I have encountered a similar issue . Below is something you can try:

In the host webpack config:
set the output.publicPath to "/"

In your remotes webpack config:

set the output.publicPath to "auto"

reference: https://webpack.js.org/guides/public-path/#environment-based

I am also happy to take a look if you could share a minimal reproducible example with me.