Nextjs+Turborepo+模块联邦报错：找不到makeSerializable模块

可能的原因及修复步骤 #

1. 版本不兼容（最常见原因） #

@module-federation/nextjs-mf对Next.js版本有严格适配要求，版本不匹配会触发内部模块引用错误：

• 执行 pnpm list next @module-federation/nextjs-mf 查看当前版本，确保两者兼容：
  • Next.js 13+ 对应 @module-federation/nextjs-mf@6.x 及以上版本
  • Next.js 12 对应 @module-federation/nextjs-mf@5.x 版本
• 若版本不匹配，执行 pnpm add @module-federation/nextjs-mf@适配版本 重新安装

2. 清理依赖缓存并重装 #

依赖安装不完整或缓存损坏也会引发该错误：

• 删除项目根目录的node_modules文件夹和pnpm-lock.yaml文件
• 执行 pnpm install 重新安装所有依赖
• 清理Turborepo缓存：pnpm dlx turbo cache clean

3. 修正Remote模块配置错误 #

你的webpack配置中remotes字段写法不符合规范，会导致模块解析路径错误：

• 原配置中host_react_module: "remoteEntry.js"缺少远程模块完整地址，需修改为[模块名]@[远程地址]/remoteEntry.js格式
• 示例修正后的配置：

remotes: {
  // 替换为你实际的Host项目地址
  host_react_module: `host_react_module@http://localhost:3000/remoteEntry.js`,
},

4. 确保Transpile配置覆盖所有本地共享包 #

若项目中有其他本地共享包（如@repo下的其他模块），需添加到transpilePackages中，避免编译时无法解析：

transpilePackages: ["@repo/ui", "@repo/其他共享包"],

完整修正后的webpack配置示例 #

module.exports = {
  transpilePackages: ["@repo/ui"],
  webpack(config, options) {
    const { isServer } = options;
    config.experiments = { topLevelAwait: true };
    config.plugins.push(
      new NextFederationPlugin({
        name: "remote_nextjs_module",
        filename: "static/chunks/remoteEntry.js",
        remotes: {
          host_react_module: `host_react_module@http://localhost:3000/remoteEntry.js`,
        },
        exposes: {
          "./oki": "./src/text.tsx",
        },
        shared: {
          react: {
            eager: true,
          },
          "react-dom": {
            eager: true,
          },
        },
        extraOptions: {
          automaticAsyncBoundary: true,
        },
      })
    );

    return config;
  },
};

内容的提问来源于stack exchange，提问作者ThanhAnNguyen