React Module Federation (MFE) supports dynamic module loading like Angular already does

Description

Would like to be able load remote React application via JSON call just like it is supported with the Angular modules. See your Advanced Angular Modules Frontend with Dynamic Module Federation article.

As far as I can tell, this ability is only supported in Angular.

Motivation

Some our application are deployed on site to a customers data centers and we also have many multi-tenant sites of our own, so we do not know the remote site URL at build time.

Our work around for now is to use URL rewrite rules so that all the remote sites end up in the same domain but this is not optimal.

Also, all of our products use React on the frontend se we would rather not have to switch to Angular (no offense to Angular) for our new stuff.

Suggested Implementation

Have an equivalent namespace as angular import { setRemoteDefinitions } from '@nrwl/react/mf';

Have similar functions for React as the Angular functions that load the modules at runtime.

import { setRemoteDefinitions } from '@nrwl/angular/mf // React equivalent import

fetch('/assets/module-federation.manifest.json')
  .then((res) => res.json())
  .then((definitions) => setRemoteDefinitions(definitions)) // <--sets the React modules
  .then(() => import('./bootstrap').catch((err) => console.error(err)));

Then lazy loading the module would still work the same as does today.

const Academics = React.lazy(() => import('ui-academics/Module'));

[wangel13]

Look at my workaround - https://taras.one/blog/dynamic-micro-frontends-with-nx-and-react

[LongLiveCHIEF]

I’ve done a lot of digging into source and docs on this, and under the hood, the whole dynamic remotes thing is framework agnostic, as it’s the webpack container that provides the functionality. (see: https://webpack.js.org/concepts/module-federation/#dynamic-remote-containers)

Originally, dynamic remotes were achieved using webpack external-remotes-plugin. Which would allow url resolution of the container at runtime.

Since then, webpack has created functionality to allow dynamic resolution of remote webpack container urls using a promise, or asynchronously, as long as the resolved object has get and init interface described in the docs.

This is what the current angular withFederatedModules function does, and is what @wangel13’s script does (in addition to ensuring shared scope access).

From there, content container retrieval is a webpack thing, and the loaded javascript is just built/packed javascript

All this is to say, I’m starting to think that the existing @nrwl/angular/mffunctions for loading components and setting remote definitions could be put into a package like @nrwl/mf and used by either framework.vs