Configurer les applications React hôte et distantes

L’application distante ajoute ModuleFederationPlugin à sa configuration webpack avec trois propriétés clés : name (identifiant unique, par exemple « buttonApp »), filename (« remoteEntry.js » — le fichier de sortie du manifeste) et exposes (association entre un nom public et le chemin du fichier source).

La configuration exposes associe un chemin de module public à un fichier local : { './Button': './src/Button' }. Cela signifie que l’application hôte peut importer 'buttonApp/Button' et recevoir le composant depuis ./src/Button.tsx. Vous pouvez exposer plusieurs composants, des utilitaires ou même des pages entières.

La propriété shared indique à Module Federation quels modules doivent être partagés entre l’application hôte et l’application distante plutôt que dupliqués. Pour React : shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true empêche le chargement simultané de plusieurs instances.

La configuration de ModuleFederationPlugin de l’application hôte comprend une propriété remotes : { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. La clé est l’espace de noms d’importation, et la valeur associe le nom et l’adresse de l’application distante au moyen de @, ce qui indique à Webpack où récupérer l’application distante à l’exécution.

Dans le code React de l’application hôte, importez le composant distant avec une importation dynamique : const Button = React.lazy(() => import('buttonApp/Button')). Le chemin d’importation correspond à l’espace de noms de l’application distante et au nom du module exposé. React.lazy divise le code de l’importation et le charge de manière asynchrone.

Comme les modules distants sont chargés de manière asynchrone, encapsulez toujours le composant distant importé paresseusement dans une limite Suspense : Suspense fallback=Loading... /. La solution de repli s’affiche pendant que Module Federation récupère remoteEntry.js et le fragment du composant depuis l’adresse de l’application distante.

Les fonctions useState, useContext et useEffect de React dépendent d’une seule instance interne de React pour suivre l’état des composants. Si l’application hôte et l’application distante chargent chacune leur propre copie de React, les fonctions de crochet déclenchent des erreurs d’appel de crochet non valide. singleton:true les force à partager une seule instance de React, ce qui résout entièrement cette catégorie de bogues.

Lorsque l’application hôte utilise react@18.2.0 et l’application distante utilise react@18.3.0, la portée partagée de Module Federation négocie la version à utiliser. Avec singleton:true et requiredVersion, elle utilise généralement la version la plus élevée si elle est compatible. Définir requiredVersion: '>=18.0.0' au lieu d’une version figée permet d’utiliser des plages de versions flexibles.

TypeScript ne connaît pas les modules distants lors de la compilation. Des importations comme import('buttonApp/Button') déclencheront donc des erreurs de type sans déclarations. Utilisez @module-federation/typescript ou créez manuellement des fichiers .d.ts qui déclarent les types des modules, afin de bénéficier de la vérification des types pour les propriétés des composants distants.

Exécutez les deux applications simultanément : l’application distante sur le port 3001 et l’application hôte sur le port 3000. Ouvrez l’application hôte : son environnement d’exécution Module Federation récupérera http://localhost:3001/remoteEntry.js, découvrira le module Button, téléchargera son fragment et l’affichera dans l’application hôte comme s’il s’agissait d’un composant local.

En production, remplacez localhost:3001 par l’adresse de l’application distante déployée. Une approche courante consiste à utiliser une variable d’environnement pour l’adresse de l’application distante, afin que CI/CD puisse injecter l’adresse correcte pour chaque environnement : buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Pourquoi React doit-il être configuré comme une instance unique dans la configuration shared de Module Federation ?

La configuration de Module Federation nécessite ModuleFederationPlugin à la fois sur l’application distante (avec name, filename et exposes) et sur l’application hôte (avec remotes). Utilisez les composants distants au moyen de React.lazy et d’une importation dynamique encapsulée dans Suspense. React et React DOM doivent être des singletons partagés afin d’éviter les erreurs de fonctions de crochet dues à plusieurs instances. Les déclarations TypeScript et les adresses d’applications distantes définies par des variables d’environnement complètent une configuration prête pour la production.