Hotel SaaS Team Replaced Module Federation With UMD Globals and Import Maps for 21 Microfrontends
SyncStays, a hotel management SaaS, built a dashboard from 21 independently-developed React apps covering functions like booking, billing, housekeeping, and POS. The team initially implemented Webpack Module Federation but found it generated around 371 wiring files per page load, caused confusing ESM import errors, and produced excessive HTTP requests that degraded development performance. Rather than treating these as solvable skill gaps, the team identified them as structural limitations of the federation approach at that scale. Instead, they served React 18's official UMD builds as global window variables and used native browser import maps to point all apps' React imports at shared shim files, eliminating duplicate instances without any federation runtime. A single lightweight host script then handles per-tab lazy loading by deciding which of the 21 app bundles to fetch and when, achieving the original goals with far less tooling complexity.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)
Log in to join the discussion and vote.
Log in