Next.js宿主应用引入next/router报错：共享模块不存在

问题场景 #

在Next.js Turborepo的宿主应用中配置NextFederationPlugin后，只要在pages目录的index.js里导入import {useRouter} from 'next/router'，启动应用就会抛出错误：

Error: Shared module next/router doesn't exist in shared scope default

移除该导入语句后错误消失，且仅需在宿主应用中使用next/router，和远程应用无关。

解决方法 #

这个错误的根源是模块联邦会自动识别并尝试共享next/router模块，但你没有在插件的shared配置里显式声明它，导致共享范围中找不到对应的模块定义。只需在NextFederationPlugin的shared配置中添加next/router的配置即可：

修改你的next.config.js中的shared部分：

shared:{
  i18next:{
    singleton:true
  },
  // 添加next/router的共享配置
  'next/router': {
    singleton: true, // 保证全局只有一个路由实例，避免状态混乱
    eager: true, // 初始化时立即加载模块，解决共享范围初始化问题
    requiredVersion: false // 跳过版本校验，直接使用宿主应用的版本
  },
},

配置说明 #

• singleton: true：确保整个应用（包括宿主和可能的远程应用）中只有一个next/router的实例，避免路由状态不一致的问题
• eager: true：强制模块在应用初始化阶段就被加载，而不是按需异步加载，这能解决模块联邦共享范围在初始化时找不到模块的问题
• requiredVersion: false：因为你仅在宿主应用中使用next/router，不需要和远程应用的版本对齐，所以跳过版本检查

内容的提问来源于stack exchange，提问作者Mohamed Amine Ayachi