runtime-external-remotes-plugin

This plugin is inspired by Zackary Jackson's ExternalTemplateRemotesPlugin and it was adapted to work with @module-federation/enhanced and Rsbuild.

Installation

$ npm i runtime-external-remotes-plugin

Host webpack.config

const config = {
  // ...otherConfigs
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        app2: "app2@[window.app2Url]/remoteEntry.js",
        'my-remote-1': 'my-remote-1@[window.remote-1-domain]/remoteEntry.js?[window.getRandomString()]',
        // ...
      },
      runtimePlugins:[require.resolve('runtime-external-remotes-plugin')]
    })
  ]
}

or rsbuild.config

defineConfig({
  // ...otherConfigs
  moduleFederation: {
    options: {
        name: "app1",
        remotes: {
            app2: "app2@[window.app2Url]/remoteEntry.js",
            'my-remote-1': 'my-remote-1@[window.remote-1-domain]/remoteEntry.js?[window.getRandomString()]',
            // ...
        },
        runtimePlugins:[require.resolve('runtime-external-remotes-plugin')]
    }
  }
})

Host (app1) source somewhere before loading main entry file

window.app2Url = "//localhost:3002"; // Whatever the url/logic to determine your remote module is
window['remote-1-domain'] = "//localhost:3003";
window.getRandomString = function (){
    return ...
}

import("./bootstrap");