以前、ブリッジコンポーネントを使って複数のマイクロフロントエンド間でReactを段階的にアップグレードした方法について書きました。当初は@module-federation/bridge-reactパッケージの利用を検討しましたが、再レンダリングに関する問題や、必要以上に多機能であるといった課題がありました。

そこで独自のパッケージを作成し、28のマイクロフロントエンドでそれぞれReactを独立してアップグレードできるように、本番環境で安定して運用しています。このたび、このパッケージをnpmで@mintel/mfe-react-bridgeとしてオープンソース化しました。

これは、異なるバージョンのReact（あるいはまったく異なるUIフレームワーク）を使用するマイクロフロントエンドをレンダリングするためのReactコンポーネントインターフェースを提供する、数個のヘルパー関数を備えた小さなライブラリです。TypeScriptの型定義を提供し、React 17および18以降をサポートしており、十分にテストされています。

マイクロフロントエンドやReactのバージョン管理で同様の課題を抱えている方々の役に立てば幸いです。何か問題がありましたら、GitHubでお気軽にIssueを登録してください。