nextjs-mf dynamic-remotes

[fokerone]

Hello everyone! I would like to know if there is any way to user dynamics-remotes using nextjs. with nextjs-mf plugin
Can it be applied in the same way when we are not using nextjs?

For example using Promise Based Dynamic Remotes or Dynamic Public Path.
This way you don't depend on the nextjs build and have everything preset.

The idea is to be able to discover the mfs when the host starts.

thx a lot 👍

[Jony-Y]

Hi @fokerone we've done it on our side, I will say what we did, but also what I saw that exists, perhaps it will help.

Our use-case was having multiple webpack MF remotes causing performance bottleneck.
What we did:
We implemented a react version or the runtime plugin, where we fetch the remoteEntries dynamically, and render lazy components.

Something like this

const fetchRemote = (url, remoteName) =>
  new Promise((resolve, reject) => {
    if (remoteCache.has(remoteName)) {
      resolve(remoteCache.get(remoteName));
    }
    const script = document.createElement('script');
    script.src = url;
    script.onerror = err => {
      reject(new Error(`Failed to fetch remote: ${remoteName}`));
    };
    script.onload = () => {
      const proxy = {
        get: request => window[remoteName].get(request),
        init: arg => {
          try {
            return window[remoteName].init(arg);
          } catch (e) {
            console.error(`Failed to initialize remote: ${remoteName}`);
            reject(e);
          }
        },
      };
      remoteCache.set(remoteName, proxy);
      resolve(proxy);
    };
    document.head.appendChild(script);
  });

const useDynamicModuleFederationImport = (
  remoteName,
  moduleName = 'App',
  scope = 'default'
) => async () => {
  if (!(remoteName in window) && !remoteCache.has(remoteName)) {
    await __webpack_init_sharing__(scope);
    const remoteUrl = getRemoteUrl(remoteName);
    const fetchedContainer = await fetchRemote(remoteUrl, remoteName);
    await fetchedContainer.init(__webpack_share_scopes__[scope]);
  }
  // 'container' is the remote app
  const container = window[remoteName];
  const factory = await container.get(`./${moduleName}`);
  const Module = factory();
  return Module;
};

export default useDynamicModuleFederationImport;

Inspired by the promise based examples.

I do know there is a runtime package, so, you can do it also manually.

I hope it helps.

[fokerone]

Hi @Jony-Y ! , i will try it! , @ScriptedAlchemy propuse this solution : nextjs-dynamic-ssr

[ScriptedAlchemy]

Don't do it dynamically like this. Use federation/runtime and init + loadRemote or loadShare

You can look at advanced-api/dynamic remotes or in the core repo under apps/runtime-demo to see dynamic use.

You can also use a runtime plugin to define the remote URLs on the fly which will give you "dynamic remotes" while keeping the static import from or import() support in the build.

Look at runtime-plugins/remote-conteol under module federation example repo to see runtime plugins

[ScriptedAlchemy]

There is the next ssr dynamic example too if your looking for node example. Next requires init to be in multiple places but any other build will not. Next sucks.