Konfiguracja aplikacji React hosta i aplikacji zdalnych

Aplikacja remote dodaje ModuleFederationPlugin do swojej konfiguracji Webpacka, podając trzy kluczowe właściwości: name (unikatowy identyfikator, np. "buttonApp"), filename ("remoteEntry.js" — plik wyjściowy manifestu) oraz exposes (mapowanie nazwy publicznej na ścieżkę pliku źródłowego).

Konfiguracja exposes mapuje publiczną ścieżkę modułu na plik lokalny: { './Button': './src/Button' }. Oznacza to, że host może zaimportować 'buttonApp/Button' i otrzyma komponent z ./src/Button.tsx. Można udostępniać wiele komponentów, narzędzi pomocniczych, a nawet całe strony.

Właściwość shared informuje Module Federation, które moduły powinny być współdzielone między hostem a remote, zamiast ładowania ich wielu kopii. W przypadku Reacta: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true zapobiega jednoczesnemu ładowaniu wielu instancji.

Konfiguracja ModuleFederationPlugin w aplikacji hosta zawiera właściwość remotes: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. Klucz jest przestrzenią nazw importu, a wartość łączy nazwę remote i jego adres URL za pomocą @ — informując Webpack, skąd pobrać remote w czasie działania.

W kodzie Reacta hosta należy zaimportować zdalny komponent za pomocą dynamicznego importu: const Button = React.lazy(() => import('buttonApp/Button')). Ścieżka importu odpowiada przestrzeni nazw remote i nazwie udostępnionego modułu. React.lazy dzieli kod importu na chunki i ładuje go asynchronicznie.

Ponieważ moduły remote są ładowane asynchronicznie, zdalny komponent importowany z użyciem lazy należy zawsze umieścić w granicy Suspense: Suspense fallback=Loading... /. Fallback jest renderowany podczas pobierania przez Module Federation pliku remoteEntry.js i chunka komponentu z adresu URL remote.

Hooki Reacta (useState, useContext, useEffect) wymagają jednej wewnętrznej instancji Reacta do śledzenia stanu komponentów. Jeśli zarówno host, jak i remote załadują własną kopię Reacta, hooki zgłoszą błędy "invalid hook call". singleton:true wymusza współdzielenie jednej instancji Reacta, całkowicie rozwiązując tę klasę problemów.

Gdy host korzysta z react@18.2.0, a remote z react@18.3.0, współdzielony zakres Module Federation uzgadnia wersję do użycia. Przy ustawieniach singleton:true i requiredVersion zazwyczaj używana jest wyższa wersja, jeśli jest zgodna. Ustawienie requiredVersion: '>=18.0.0' zamiast przypiętej wersji pozwala korzystać z elastycznych zakresów wersji.

TypeScript nie zna modułów remote w czasie kompilacji, dlatego importy takie jak import('buttonApp/Button') bez deklaracji powodują błędy typów. Należy użyć @module-federation/typescript lub ręcznie utworzyć pliki .d.ts deklarujące typy modułów, aby zapewnić bezpieczeństwo typów dla właściwości zdalnych komponentów.

Należy uruchomić obie aplikacje jednocześnie: remote na porcie 3001, a hosta na porcie 3000. Po otwarciu hosta środowisko uruchomieniowe Module Federation pobierze http://localhost:3001/remoteEntry.js, znajdzie moduł Button, pobierze jego chunk i wyrenderuje go w aplikacji hosta tak, jakby był komponentem lokalnym.

W środowisku produkcyjnym należy zastąpić localhost:3001 adresem URL wdrożonego remote. Często stosuje się zmienną środowiskową dla adresu URL remote, aby CI/CD mogło wstrzyknąć właściwy adres dla danego środowiska: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Dlaczego React musi być skonfigurowany jako singleton we współdzielonej konfiguracji Module Federation?

Konfiguracja Module Federation wymaga użycia ModuleFederationPlugin zarówno po stronie remote (z właściwościami name, filename i exposes), jak i hosta (z właściwością remotes). Zdalne komponenty należy pobierać za pomocą React.lazy i dynamicznego importu opakowanych w Suspense. React i React DOM muszą być współdzielonymi singletonami, aby zapobiec błędom hooków wynikającym z wielu instancji. Deklaracje TypeScript oraz adresy URL remote przechowywane w zmiennych środowiskowych dopełniają konfigurację gotową do użycia w produkcji.