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

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

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

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