@module-federation/nextjs-mf生产环境remoteEntry.js异常问题

问题背景 #

搭建了集成Module Federation的Next.js项目，npm run dev运行正常，但执行npm run build并启动npm run start后，remoteEntry.js出现两个关键错误：

• Module "+e+" does not exist in container.
• Container initialization failed as it has already been initialized with a different share scope
  导致该项目无法作为远程资源提供者被其他应用调用，触发远程应用的假远程错误。

项目配置如下：

package.json #

{
  "name": "template-host-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "@module-federation/nextjs-mf": "^7.0.7",
    "react-dom": "^18",
    "next": "13.5.6"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "13.5.6"
  }
}

next.config.js #

/** @type {import('next').NextConfig} */

const { NextFederationPlugin } = require('@module-federation/nextjs-mf');

 const remotes = (isServer) => {
   const location = isServer ? 'ssr' : 'chunks';
   return {
     // specify remotes
   };
 }

 const nextConfig = {
   reactStrictMode: true,
   webpack(config, { isServer }) {
     config.plugins.push(
       new NextFederationPlugin({
         name: 'host',
         filename: 'static/chunks/remoteEntry.js',
         exposes: {
           "./Page": "./pages",
         }
       })
     );

     return config;
   },
 }

module.exports = nextConfig

tsconfig.json #

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

解决方案 #

针对这两个错误，可通过以下步骤修复：

1. 完善NextFederationPlugin的共享依赖配置 #

共享依赖的singleton和eager配置能避免共享范围冲突，同时指定版本确保一致性。修改next.config.js：

/** @type {import('next').NextConfig} */
const { NextFederationPlugin } = require('@module-federation/nextjs-mf');

const nextConfig = {
  reactStrictMode: true,
  webpack(config, { isServer }) {
    config.plugins.push(
      new NextFederationPlugin({
        name: 'host',
        filename: 'static/chunks/remoteEntry.js',
        exposes: {
          "./Page": "./pages", // 确认pages目录下有可导出的组件，若用App Router需改为./app/page.tsx
        },
        // 配置共享依赖，强制单例模式避免初始化冲突
        shared: {
          react: { singleton: true, eager: true, requiredVersion: process.env.npm_package_dependencies.react },
          'react-dom': { singleton: true, eager: true, requiredVersion: process.env.npm_package_dependencies['react-dom'] },
          next: { singleton: true, eager: true, requiredVersion: process.env.npm_package_dependencies.next }
        }
      })
    );

    // 客户端构建时指定publicPath，确保remoteEntry能正确加载模块
    if (!isServer) {
      config.output.publicPath = 'http://localhost:3000/_next/';
    }

    return config;
  },
}

module.exports = nextConfig

2. 验证exposes路径的有效性 #

如果使用Next.js 13的App Router，./pages路径不存在，需将exposes改为对应App Router的路径，比如：

exposes: {
  "./HomePage": "./app/page.tsx",
}

确保暴露的模块有默认导出，否则会出现模块不存在的错误。

3. 清理构建缓存后重新构建 #

执行以下命令彻底清理缓存并重新构建：

rm -rf .next node_modules package-lock.json
npm install
npm run build
npm run start

原理说明 #

• Container initialization failed错误通常是因为共享依赖（如react、next）在宿主和远程应用中被多次初始化，启用singleton模式确保全局只有一个实例。
• Module "+e+" does not exist错误多因exposes路径配置错误或publicPath未正确设置，导致remoteEntry无法找到对应模块。

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