Support Module Federation + React SSR

🐛 Bug Report

There are problems when trying to integrate the loadable with a React application that uses Module Federation, especially if the application performs SSR with federated components.

Sample to reproduce

I created a repository that exemplifies the issues in two use cases, one with React 16 and the other with React 18. Here is the repo link

https://github.com/brunos3d/loadable-module-federation-react-ssr

How to run it

To make it work just clone it, navigate with the terminal to one of the example folders, install the dependencies with yarn, and then run yarn start, here are the commands to run quickly:

cd samples/loadable-react-16
yarn install
yarn start

About the sample repo

The project has a readme file that explains how to use it, but basically, there are two workspaces in the samples folder, two applications in each workspace.

Expected behavior

In both samples the expected result is the same: render the app1 on the server side consuming the Content component that is federated by app2 application using Module Federation and importing it using loadable. The component must be delivered to the client side statically and must be hydrated so that it can be reactive whenever the user changes the text input.

Workarounds and hacks

I worked alongside @ScriptedAlchemy so that we could identify a way to make this work and we created some workarounds in the examples to make this work. They are described/listed here, I hope that these applied hacks can be useful to solve the problem natively. The places that have the application of these workarounds are marked with the following comment // ================ WORKAROUND ================.

[brunos3d]

Hello, folks. Me and @ScriptedAlchemy just created a PR that adds a new option to babel-plugin called moduleFederation, it makes Module Federation compatible with loadable.

Here is a branch with the changes to test this fix.

cc: @theKashey @ScriptedAlchemy

[bwhitty]

Would using a sync require() have implications on runtime performance?

e.g. a require() would mean that all this must be done up-front (at app bootup), but a import() would mean that we’d be able to resolve federated imports at any point during runtime with no impact on the running app’s process (via the non-blocking import)