Upgrading React with micro-frontends
In 2021, we deployed a microfrontend architecture using React 17. We followed suggestions to set react and react-dom as shared singleton modules. This rendered the app in a single React tree. With popular dependencies requiring React 18 and React 19 on the way, we must upgrade React in our micro-frontends. With many teams involved, we must do it in small steps.
To render the microfrontend in a separate React tree, we added a "bridge" component wrapper. This would allow us to upgrade React in the microfrontend without affecting the shell.
The @module-federation/bridge-react package provides some helpers to support this approach. Within a micro-frontend, we added a new export-app.tsx file to wrap the entry React component in a bridge:
We also needed to update the ModuleFederationPlugin to expose this new entry file. We had to stop sharing react and react-dom as singletons to upgrade to a higher version than the shell.
In our shell application, we use import-remote to dynamically load remoteEntry files. We need to adjust this to load both directly exposed and bridged React components for backwards compatibility:
