Configurando aplicações React hospedeira e remotas

A aplicação remota adiciona o ModuleFederationPlugin à configuração do webpack com três propriedades fundamentais: name, um identificador exclusivo, por exemplo, "buttonApp"; filename, "remoteEntry.js", a saída do manifesto; e exposes, um mapa do nome público para o caminho do arquivo de origem.

A configuração exposes mapeia um caminho de módulo público para um arquivo local: { './Button': './src/Button' }. Isso significa que a aplicação hospedeira pode importar 'buttonApp/Button' e receber o componente de ./src/Button.tsx. Você pode disponibilizar vários componentes, utilitários ou até páginas completas.

A propriedade shared informa ao Module Federation quais módulos devem ser compartilhados entre a aplicação hospedeira e a remota, em vez de duplicados. Para o React: shared: { react: { singleton: true, requiredVersion: deps.react }, 'react-dom': { singleton: true } }. singleton:true impede que várias instâncias sejam carregadas simultaneamente.

A configuração do ModuleFederationPlugin da aplicação hospedeira inclui uma propriedade remotes: { buttonApp: 'buttonApp@http://localhost:3001/remoteEntry.js' }. A chave é o espaço de nomes da importação; o valor combina o nome e a URL da aplicação remota com @, informando ao Webpack onde buscá-la em tempo de execução.

No código React da aplicação hospedeira, importe o componente remoto com uma importação dinâmica: const Button = React.lazy(() => import('buttonApp/Button')). O caminho da importação corresponde ao espaço de nomes da aplicação remota e ao nome do módulo disponibilizado. React.lazy divide o código da importação e o carrega de forma assíncrona.

Como os módulos remotos são carregados de forma assíncrona, sempre envolva o componente remoto importado de forma adiada em um limite Suspense: Suspense fallback=Loading... /. A alternativa é renderizada enquanto o Module Federation busca o remoteEntry.js e o bloco do componente na URL da aplicação remota.

Os ganchos do React, como useState, useContext e useEffect, dependem de uma única instância interna do React para acompanhar o estado do componente. Se a aplicação hospedeira e a remota carregarem suas próprias cópias do React, os ganchos lançarão erros de "chamada de gancho inválida". singleton:true força o compartilhamento de uma única instância do React, resolvendo completamente essa classe de erros.

Quando a aplicação hospedeira utiliza react@18.2.0 e a remota utiliza react@18.3.0, o escopo compartilhado do Module Federation negocia qual versão usar. Com singleton:true e requiredVersion, normalmente ele utiliza a versão mais alta, se for compatível. Definir requiredVersion: '>=18.0.0' em vez de uma versão fixa permite intervalos de versões flexíveis.

O TypeScript não conhece os módulos remotos em tempo de compilação, portanto importações como import('buttonApp/Button') gerarão erros de tipo sem declarações. Utilize @module-federation/typescript ou crie manualmente arquivos .d.ts que declarem os tipos dos módulos, obtendo segurança de tipos para as propriedades dos componentes remotos.

Execute as duas aplicações simultaneamente: a aplicação remota na porta 3001 e a aplicação hospedeira na porta 3000. Abra a aplicação hospedeira — o ambiente de execução do Module Federation buscará http://localhost:3001/remoteEntry.js, descobrirá o módulo Button, baixará o bloco correspondente e o renderizará dentro da aplicação hospedeira como se fosse um componente local.

Em produção, substitua localhost:3001 pela URL implantada da aplicação remota. Um padrão comum é utilizar uma variável de ambiente para a URL da aplicação remota, permitindo que a integração e a entrega contínuas injetem a URL correta para cada ambiente: buttonApp: 'buttonApp@' + process.env.BUTTON_REMOTE_URL + '/remoteEntry.js'.

Por que o React deve ser configurado como uma instância única na configuração compartilhada do Module Federation?

Configurar o Module Federation exige o ModuleFederationPlugin tanto na aplicação remota, com name, filename e exposes, quanto na aplicação hospedeira, com remotes. Consuma componentes remotos por meio de React.lazy e de uma importação dinâmica envolvida em Suspense. O React e o React DOM devem ser instâncias únicas compartilhadas para evitar erros de ganchos causados por várias instâncias. Declarações do TypeScript e URLs de aplicações remotas definidas por variáveis de ambiente completam uma configuração pronta para produção.