Next.js配置Module Federation报withModuleFederation不是函数错误

在Next.js项目中落地微前端架构时，启动服务抛出TypeError: withModuleFederation is not a function错误；尝试将@module-federation/nextjs-mf升级到最新版本后，又触发版本不匹配类报错。

问题相关配置 #

next.config.js 现有内容 #

const {
  withModuleFederation,
  MergeRuntime,
} = require("@module-federation/nextjs-mf");
const path = require("path");

module.exports = {
  webpack: (config, options) => {
    const { buildId, dev, isServer, defaultLoaders, webpack } = options;
    const mfConf = {
      name: "test1",
      library: { type: config.output.libraryTarget, name: "test1" },
      filename: "static/runtime/remoteEntry.js",
      remotes: {},
      exposes: {
        "./nav": "./components/nav",
      },
      shared: [],
    };

    withModuleFederation(config, options, mfConf);
    config.plugins.push(new MergeRuntime());
    if (!isServer) {
      config.output.publicPath = "http://localhost:3000/_next/";
    }
    return config;
  },
};

package.json 现有内容 #

{
  "name": "charts",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "resolutions": {
    "webpack": "5.1.3"
  },
  "dependencies": {
    "@module-federation/nextjs-mf": "^2.3.1",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "devDependencies": {
    "@types/node": "^17.0.40",
    "@types/react": "^18.0.12",
    "eslint": "8.17.0",
    "eslint-config-next": "12.1.6",
    "typescript": "^4.7.3"
  }
}

• 版本兼容性核对：@module-federation/nextjs-mf和Next.js是大版本强绑定关系，不存在跨大版本兼容。当前使用的Next 12.1.6无法直接适配最新版nextjs-mf（最新版面向Next 13/14的App Router设计，导出API完全重构）。
• 依赖锁配置校验：配置中通过resolutions强制锁定webpack@5.1.3，该版本的ModuleFederationPlugin本身存在已知缺陷，且和Next 12.1.6内置适配的webpack版本完全不匹配，会直接导致插件导出异常、函数不存在的报错。
• API 差异校验：nextjs-mf 2.x版本和6.x/7.x/8.x版本的导出结构差异极大，新版本已经移除了MergeRuntime导出，withModuleFederation的调用方式也从原来的直接传webpack配置、options、mf配置，改成了Next.js配置高阶函数，直接升级后沿用旧写法必然触发报错。

方案一：保留Next 12版本，匹配对应兼容依赖（改动最小） #

1. 卸载现有不匹配依赖：

npm uninstall @module-federation/nextjs-mf webpack

2. 删除package.json中resolutions字段下强制锁定webpack版本的配置，Next.js会自动引入适配版本的webpack，无需手动指定。
3. 安装适配Next 12的稳定版nextjs-mf：

npm install @module-federation/nextjs-mf@6.2.1

4. 调整next.config.js配置适配6.x版本API（新版已经内置MergeRuntime逻辑，无需手动引入插件）：

const { withModuleFederation } = require("@module-federation/nextjs-mf");

const mfConfig = {
  name: "test1",
  filename: "static/runtime/remoteEntry.js",
  remotes: {},
  exposes: {
    "./nav": "./components/nav",
  },
  shared: {
    react: { singleton: true, requiredVersion: false },
    "react-dom": { singleton: true, requiredVersion: false }
  },
};

module.exports = withModuleFederation(mfConfig, {
  webpack: (config, options) => {
    const { isServer } = options;
    if (!isServer) {
      config.output.publicPath = "http://localhost:3000/_next/";
    }
    return config;
  },
});

5. 若启动仍有缓存报错，删除node_modules目录和包锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）后重新执行依赖安装即可。

方案二：升级Next.js版本适配最新版nextjs-mf #

如果需要使用最新版nextjs-mf的特性，需要同步升级Next.js到13.4+或14.x稳定版，同时升级react、react-dom到对应兼容版本，安装最新版@module-federation/nextjs-mf后，按照新版API范式重写next.config.js配置即可。

• 不要手动强制锁定webpack版本，Next.js对内置webpack做了大量定制适配，手动锁定非匹配版本的webpack会触发各类构建、运行时异常。
• mf配置中的shared字段不要留空，react、react-dom这类全局单例依赖必须配置singleton参数，否则微前端加载时会出现多实例React导致的Hooks调用报错。
• 跨大版本升级nextjs-mf时不要沿用旧版配置写法，先核对对应版本的API变更再调整配置。

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