Host- und Remote-React-Apps konfigurieren

Die remote-Anwendung fügt ihrer Webpack-Konfiguration das ModuleFederationPlugin mit drei wichtigen Eigenschaften hinzu: name (eindeutiger Bezeichner, z. B. „buttonApp“), filename („remoteEntry.js“ – die Ausgabe des Manifests) und exposes (eine Zuordnung von öffentlichen Namen zu Quelldateipfaden).

Die exposes-Konfiguration ordnet einen öffentlichen Modulpfad einer lokalen Datei zu: { './Button': './src/Button' }. Das bedeutet, dass der host 'buttonApp/Button' importieren und die Komponente aus ./src/Button.tsx erhalten kann. Sie können mehrere Komponenten, Hilfsfunktionen oder sogar vollständige Seiten bereitstellen.

Die Eigenschaft shared gibt Module an, die zwischen host und remote gemeinsam genutzt und nicht doppelt geladen werden sollen. Für React gilt: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true verhindert, dass mehrere Instanzen gleichzeitig geladen werden.

Die ModuleFederationPlugin-Konfiguration der host-Anwendung enthält eine Eigenschaft remotes: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. Der Schlüssel ist der Import-Namespace, der Wert kombiniert den Namen und die URL des remote mit @. Dadurch wird Webpack mitgeteilt, wo das remote zur Laufzeit abgerufen werden soll.

Importieren Sie die Remote-Komponente im React-Code des host mit einem dynamischen Import: const Button = React.lazy(() => import('buttonApp/Button')). Der Importpfad entspricht dem Namespace des remote und dem Namen des bereitgestellten Moduls. React.lazy sorgt dafür, dass der Import in einen separaten Code-Chunk aufgeteilt und asynchron geladen wird.

Da Remote-Module asynchron geladen werden, sollten Sie die per Lazy-Import geladene Remote-Komponente immer in eine Suspense-Grenze einschließen: Suspense fallback=Loading... /. Das Fallback wird angezeigt, während Module Federation remoteEntry.js und den Komponenten-Chunk von der URL des remote abruft.

React-Hooks (useState, useContext, useEffect) benötigen eine einzige interne React-Instanz, um den Zustand von Komponenten zu verwalten. Wenn sowohl der host als auch der remote eine eigene React-Kopie laden, lösen die Hooks Fehler vom Typ „invalid hook call“ aus. singleton:true zwingt beide dazu, eine gemeinsame React-Instanz zu verwenden, und behebt diese Fehlerklasse vollständig.

Wenn der host react@18.2.0 und der remote react@18.3.0 verwendet, handelt der gemeinsame Scope von Module Federation aus, welche Version verwendet wird. Mit singleton:true und requiredVersion wird typischerweise die höhere Version verwendet, sofern sie kompatibel ist. Wenn Sie statt einer festgelegten Version requiredVersion: '>=18.0.0' setzen, sind flexible Versionsbereiche möglich.

TypeScript kennt Remote-Module zur Kompilierzeit nicht. Daher führen Importe wie import('buttonApp/Button') ohne Deklarationen zu Typfehlern. Verwenden Sie @module-federation/typescript oder erstellen Sie manuell .d.ts-Dateien, die die Modultypen deklarieren. So erhalten Sie Typsicherheit für die Props von Remote-Komponenten.

Führen Sie beide Anwendungen gleichzeitig aus: das remote auf Port 3001 und den host auf Port 3000. Öffnen Sie den host. Seine Module-Federation-Laufzeitumgebung ruft http://localhost:3001/remoteEntry.js ab, ermittelt das Button-Modul, lädt dessen Chunk herunter und rendert es innerhalb der host-Anwendung, als wäre es eine lokale Komponente.

Ersetzen Sie in der Produktion localhost:3001 durch die URL des bereitgestellten remote. Ein gängiges Muster besteht darin, eine Umgebungsvariable für die URL des remote zu verwenden, damit CI/CD die passende URL für jede Umgebung einsetzen kann: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Warum muss React in der gemeinsamen Konfiguration von Module Federation als Singleton eingerichtet werden?

Für die Konfiguration von Module Federation benötigen sowohl der remote (mit name, filename und exposes) als auch der host (mit remotes) das ModuleFederationPlugin. Nutzen Sie Remote-Komponenten über React.lazy und einen dynamischen Import, eingeschlossen in Suspense. React und React DOM müssen als gemeinsam genutzte Singletons konfiguriert werden, um Hook-Fehler durch mehrere Instanzen zu verhindern. TypeScript-Deklarationen und Remote-URLs aus Umgebungsvariablen vervollständigen eine produktionsreife Einrichtung.