Next.js13模块联邦中使用带Hooks的远程组件报错求助

问题场景 #

在Next.js 13结合Module Federation架构中，远程应用内包含useState Hook的Button组件可正常运行，但引入到宿主应用后无法工作，出现Hook相关报错。

解决方案 #

1. 共享React单例依赖 #

Hook报错核心原因通常是宿主与远程应用加载了多份React实例，导致Hook运行在不同的React上下文环境中。需要在宿主和远程应用的next-config.js的shared配置中添加React及ReactDOM的单例共享：

shared: {
  react: {
    singleton: true,
    eager: true,
    requiredVersion: false,
  },
  'react-dom': {
    singleton: true,
    eager: true,
    requiredVersion: false,
  },
  'styled-components': {
    singleton: true,
    eager: true,
    requiredVersion: false,
  },
}

2. 优化远程组件动态导入写法 #

宿主应用中动态导入远程组件的代码可简化，避免不必要的包装函数，并显式禁用SSR（因远程组件带有'use client'指令）：

'use client'
import dynamic from 'next/dynamic'

const RemoteComponent = dynamic(() => import('front_login/Button'), { ssr: false })

export default function Auth() {
  return (
    <>
      <RemoteComponent />
    </>
  )
}

3. 校验环境变量与远程Entry路径 #

确认宿主应用的process.env.FRONT_LOGIN环境变量正确指向远程应用的部署地址（如http://localhost:3001），确保远程Entry文件remoteEntry.js的路径可正常访问。

4. 验证远程组件导出配置 #

检查远程应用next-config.js中exposes配置的组件路径是否与实际文件路径一致，确认button.tsx确实导出了默认组件且无语法错误。

内容的提问来源于stack exchange，提问作者Gabriel Soares Maciel