Configuración de aplicaciones React host y remotas

La aplicación remote añade ModuleFederationPlugin a su configuración de webpack con tres propiedades clave: name (identificador único, por ejemplo, "buttonApp"), filename ("remoteEntry.js", la salida del manifiesto) y exposes (un mapa del nombre público a la ruta del archivo fuente).

La configuración exposes asigna una ruta de módulo pública a un archivo local: { './Button': './src/Button' }. Esto significa que el host puede importar 'buttonApp/Button' y recibir el componente de ./src/Button.tsx. Puede exponer varios componentes, utilidades o incluso páginas completas.

La propiedad shared indica a Module Federation qué módulos deben compartirse entre el host y el remote en lugar de duplicarse. Para React: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true evita que se carguen varias instancias simultáneamente.

La configuración de ModuleFederationPlugin de la aplicación host incluye una propiedad remotes: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. La clave es el espacio de nombres de importación y el valor combina el nombre y la URL del remote mediante @, lo que indica a Webpack dónde obtener el remote en tiempo de ejecución.

En el código React del host, importe el componente remoto mediante una importación dinámica: const Button = React.lazy(() => import('buttonApp/Button')). La ruta de importación coincide con el espacio de nombres del remote y el nombre del módulo expuesto. React.lazy divide la importación en un chunk y la carga de forma asíncrona.

Como los módulos remotos se cargan de forma asíncrona, envuelva siempre el componente remoto importado de forma diferida en un límite Suspense: Suspense fallback=Loading... /. El fallback se muestra mientras Module Federation obtiene remoteEntry.js y el chunk del componente desde la URL del remote.

Los hooks de React (useState, useContext, useEffect) dependen de una única instancia interna de React para realizar el seguimiento del estado de los componentes. Si tanto el host como el remote cargan su propia copia de React, los hooks producirán errores de "invalid hook call". singleton:true obliga a ambos a compartir una única instancia de React, lo que resuelve por completo esta clase de errores.

Cuando el host utiliza react@18.2.0 y el remote utiliza react@18.3.0, el ámbito compartido de Module Federation negocia qué versión se debe utilizar. Con singleton:true y requiredVersion, normalmente utiliza la versión superior si es compatible. Establecer requiredVersion: '>=18.0.0' en lugar de una versión fijada permite usar rangos de versiones flexibles.

TypeScript no conoce los módulos remotos en tiempo de compilación, por lo que las importaciones como import('buttonApp/Button') producirán errores de tipos si no hay declaraciones. Utilice @module-federation/typescript o cree manualmente archivos .d.ts que declaren los tipos de los módulos, para disponer de seguridad de tipos en las props de los componentes remotos.

Ejecute ambas aplicaciones simultáneamente: el remote en el puerto 3001 y el host en el puerto 3000. Abra el host: su runtime de Module Federation obtendrá http://localhost:3001/remoteEntry.js, descubrirá el módulo Button, descargará su chunk y lo renderizará dentro de la aplicación host como si fuera un componente local.

En producción, sustituya localhost:3001 por la URL del remote desplegado. Un patrón habitual consiste en utilizar una variable de entorno para la URL del remote, de modo que CI/CD pueda inyectar la URL correcta para cada entorno: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

¿Por qué se debe configurar React como singleton en la configuración shared de Module Federation?

Configurar Module Federation requiere ModuleFederationPlugin tanto en el remote (con name, filename y exposes) como en el host (con remotes). Consuma los componentes remotos mediante React.lazy + importación dinámica envueltos en Suspense. React y React DOM deben ser singletons compartidos para evitar errores de hooks causados por varias instancias. Las declaraciones de TypeScript y las URL de remotes configuradas mediante variables de entorno completan una configuración lista para producción.