使用@module-federation/nextjs-mf与Cypress在流水线运行出错

问题现象 #

1. 本地运行时出现提示 No ModuleFederationPlugin(s) found，但微前端功能正常；
2. 代码推送至流水线后出现构建错误。

项目关键依赖版本 #

• next: 12.1.0
• @module-federation/nextjs-mf: 6.0.4
• webpack: 5.75.0

Next.js 核心配置 #

const MICRO_FRONT_END = '/journey';

const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack(config, options) {
    const { isServer } = options;
    function getEnv() {
      const env = process.env.API;

      if (env === 'production') {
        return 'https://app.prod';
      }

      if (env === 'stage') {
        return 'https://app.stg';
      }

      return 'https://app.dev';
    }

    config.plugins.push(
      new NextFederationPlugin({
        name: 'analysisMF',
        remotes: {
          menuSideMf: `menuSideMf@${getEnv()}/main-components/_next/static/${
            isServer ? 'ssr' : 'chunks'
          }/remoteEntry.js`,
        },
        filename: 'static/chunks/remoteEntry.js',
      })
    );

    return config;
  },
};

module.exports = {
  ...nextConfig,
  basePath: process.env.LOCALHOST ? '' : MICRO_FRONT_END,
  env: {
    API: process.env.API,
    LOCALHOST: process.env.LOCALHOST,
  },
}

解决方案 #

1. 消除本地 No ModuleFederationPlugin(s) found 提示 #

这个提示是@module-federation/nextjs-mf旧版本的检测逻辑问题，插件实际已生效所以功能正常，可通过以下方式解决：

• 升级@module-federation/nextjs-mf至适配Next.js 12.x的最新兼容版本（如v6.1.x+，需确认官方版本兼容性）；
• 调整webpack插件添加方式，替换config.plugins.push(...)为：

  config.plugins = [
    ...config.plugins,
    new NextFederationPlugin({ /* 你的配置 */ })
  ]
  

  确保插件被正确加入到webpack插件队列中。

2. 修复CI流水线构建错误 #

结合常见CI环境问题，排查方向如下：

• 环境变量检查：确保CI环境中已正确设置API环境变量，否则getEnv()会默认返回https://app.dev，若该地址在CI环境不可达或远程模块未部署，会导致构建失败；
• 本地包依赖检查：项目中依赖了本地tgz包（如jsplumbtoolkit系列），需确保CI构建环境中这些./lib/下的tgz文件存在，或改用npm仓库托管的正式包；
• 版本兼容性验证：确认@module-federation/nextjs-mf@6.0.4与next@12.1.0的兼容性，若存在版本不匹配，升级或降级至官方推荐的兼容版本组合；
• 远程地址路径校验：检查CI环境下getEnv()返回的地址拼接后，remoteEntry.js的路径是否正确，确保远程微前端的remoteEntry.js已部署到对应路径；
• CI构建命令检查：确保CI中执行的构建命令与本地一致，避免因命令差异导致webpack配置未正确加载。

3. 额外优化建议 #

• 将getEnv()的逻辑抽离为单独的环境变量配置文件，便于本地和CI环境统一管理；
• 在CI构建前添加依赖安装的校验步骤，确保所有依赖（包括本地包）都已正确安装。

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