How to load a remote only after one first has been loaded?

[felipeloge]

Hey all,
I have a situation that I need to load a remote app only after the first one has been loaded.
I have the following Webpack module federation config in my host app:

// webpack.config.modulefederation.js

module.exports = {
  name: 'weborders',
  remotes: {
    '@qikwebkit': `qikwebkit@https://ui.website.com/remoteEntry.js`,
    '@qikwebkit-orders/my-account': `my_account@https://ui.website.com/my-account/remoteEntry.js`,
  },
  runtimePlugins: [
    require.resolve('./webpack.config.runtimeplugin.js'),
  ],
  shared: {
    'react': {
      singleton: true,
      requiredVersion: dependencies['react'],
    },
    'react-dom': {
      singleton: true,
      requiredVersion: dependencies['react-dom'],
    },
  },
};

// webpack.config.runtimeplugin.js
const QIKWEBKIT_ALIAS_PREFIX = '@qikwebkit';
const QIKWEBKIT_URL = 'https://ui.website.com'; // This url is hard coded, but in real world it comes from an environment var and defined in `window`, e.g. window.QIKWEBKIT_URL;

function getQikWebKitRemoteEntryUrl(remoteEntry) {
  // Append a query param with a unique value to prevent caching
  const timestamp = Date.now();

  const remoteHost = QIKWEBKIT_URL.replace(/\/$/, '');
  const remoteEntryUrl = new URL(remoteEntry);

  return `${remoteHost}${remoteEntryUrl.pathname}?t=${timestamp}`;
}

export default function webOrdersRemoteRouter() {
  return {
    name: 'web-orders-remote-router',
    beforeInit(args) {
      args.options.remotes.forEach((remote) => {
        if (remote.alias.includes(QIKWEBKIT_ALIAS_PREFIX)) {
          remote.entry = getQikWebKitRemoteEntryUrl(remote.entry);
        }
      });

      return args;
    },
  };
}

So to give more context, both @qikwebkit and @qikwebkit-orders remotes are projects in different repositories.
The @qikwebkit-orders remote app is in a monorepo built with NX and also consumes the remote @qikwebkit one that I have configured based on NX tools for module federation.

What's the issue?
In my host app, when the application starts, it's loading the @qikwebkit remoteEntry.js file as duplicated.

• The first loaded contains the timestamp as query param to prevent caching
• The second loaded is from @qikwebkit-orders without the query param because NX tool for module federation is not flexible at this point

So the ideal solution would be to load only the first one (with timestamp as query param), however it would be necessary to wait the @qikwebkit remote to be loaded first and then @qikwebkit-orders could be loaded.

Resuming... Is that possible to load @qikwebkit-orders remote only after @qikwebkit remote is loaded?
Is there a way to handle with that using the runtime plugin? or any another approach?

Thanks in advance

[ScriptedAlchemy]

Containers should not inject remotes multiple times, if the remote is the same name, then the federation runtime will see that the remotes are all the same global name and not load the same thing again.