Module Federation: Loadable Manifest runtime hooks.

[ScriptedAlchemy]

Describe the feature you'd like to request

Federated SSR - when using async imports and next/dynamic. Ill get hydration errors and flicker because dynamic cannot find nested remote imports in its loadable manifest.

Id like a hook or pluggable api where i can register additional manifest items during runtime.

I do not have hydration problems if i use static imports or require(), but dynamic imports are not properly tracked due to missing keys in loadable manifest.

In my scenario, I have an empty next.js application. All Pages are federated imports from independently deployed codebases, those pages each have federated imports themselves. While i can make next.js track the federated page imports, since they are known to webpack during build time, but ive have to use a hack to side-load additional graph information into next.js for further nested imports.

If i go into loadable and console.log opts.modules or moduleId, ill see the ID that i needed, so the information is already in loadable, but all i can access is the getter key its going to look for on the manifest. So i have to perform additional lookups inside my remote containers in order to resolve what the actual ID is thats required. Note i only have to perform these additional lookups because next needs dynamicIds which is fed off the json object. I already can get the chunks i needed for federated imports, but without an api its not easy to grab the right module id to set on my dynamic manifest item

TLDR: I want to add foreign chunks and module ids to react loadable at runtime to better enable module federation and SSR. Right now I have to rely on object proxy and replacing require.cache exports.

Describe the solution you'd like

Ideally an api hook in _document that can run as late as possible in the lifecycle. Somewhere after getInitialProps but before render(){}

I need to be able to add extra keys to react-loadable manifest during execution.

My current solution is to run a function called flushChunks() in _document getInitialProps()

I would like to be able to have a callback or something where i can receive the information that loadable collects in its object. Usually its got the import name, the module id, and some async loading method.

Knowing the moduleId and what manifest key it needs would be perfect. I was thinking about something like a pass through function where i could intercept the lookup and short circuit it with a return statement if it meets additional conditions, like being a federated import - thus requiring chunk data from somewhere else other than a static json file.

Describe alternatives you've considered

Save me from this please :)

const extractChunkCorrelation = (remoteContainer, lookup, request) => {
  if (
    remoteContainer &&
    remoteContainer.chunkMap &&
    remoteContainer.chunkMap.federatedModules
  ) {
    const path = remoteContainer.path.split("@")[1];
    const [baseurl] = path.split("static/ssr");
    remoteContainer.chunkMap.federatedModules.map((federatedRemote) => {
      federatedRemote.exposes[request].forEach((remoteChunks) => {
        remoteChunks.chunks.map((chunk) => {
          if (!lookup.files.includes(new URL(chunk, baseurl).href)) {
            lookup.files.push(new URL(chunk, baseurl).href);
          }
        });
      });
    });
  } else {
    console.warn(
      "Module Federation:",
      "no federated modules in chunk map OR experiments.flushChunks is disabled"
    );
  }
};
const requireMethod =
  typeof __non_webpack_require__ !== "undefined"
    ? __non_webpack_require__
    : require;
const requestPath = path.join(
  process.cwd(),
  ".next",
  "server/pages",
  "../../react-loadable-manifest.json"
);
let remotes = {};
const loadableManifest = requireMethod(requestPath);
// super hack, vercel please save me from this
requireMethod.cache[requestPath].exports = new Proxy(loadableManifest, {
  get(target, prop, receiver) {
    if (!target[prop]) {
      let remoteImport = prop.split("->")[1]

      if (remoteImport) {
        remoteImport = remoteImport.trim();
        const [remote, module] = remoteImport.split("/");

        if (!remotes[remote]) {
          Object.assign(remotes,generateDynamicRemoteScript(global.loadedRemotes[remote]))
        }

        const dynamicLoadableManifestItem = {
          id: prop,
          files: [],
        };
        // TODO: figure out who is requesting module
        let remoteModuleContainerId
          Object.values(global.loadedRemotes).find((remote)=> {
          if(remote.chunkMap && remote.chunkMap.federatedModules[0] && remote.chunkMap.federatedModules[0].remoteModules) {
            if(remote.chunkMap.federatedModules[0].remoteModules[remoteImport]) {
              remoteModuleContainerId = remote.chunkMap.federatedModules[0].remoteModules[remoteImport]
              return true
            }
          }
        })
// needed for production since module id isnt the same as manifest key, its a number
// so a reverse reverse lookup is required to locate module id from manifest key loadable looks for on proxy
        if(remoteModuleContainerId) {
          dynamicLoadableManifestItem.id = remoteModuleContainerId
        }
        extractChunkCorrelation(
          global.loadedRemotes[remote],
          dynamicLoadableManifestItem,
          `./${module}`
        );
        return dynamicLoadableManifestItem;
      }
    }
    return target[prop];
  },
});
```