Next.js中Module Federation容器启动报错，请求排查错误原因

我正在使用Next.js开发，采用微前端架构，通过@module-federation/nextjs-mf实现容器应用，计划将本地化资源与字体资源放在容器中。

容器应用的next.config.js配置：

const NextFederationPlugin = require('@module-federation/nextjs-mf')
const { i18n } = require('./next-i18next.config')

module. Exports = {
  reactStrictMode: true,
  i18n,
  webpack(config, options) {
    const { isServer } = options
    const location = isServer ? 'ssr' : 'chunks'

    config.plugins.push(
      new NextFederationPlugin({
        name: 'home',
        filename: 'static/chunks/remoteEntry.js',
        remotes: {
          container: `container@http://localhost:3000/_next/static/${location}/remoteEntry.js`,
          app2: `app2://localhost:3001/_next/static/${location}/remoteEntry.js`,
        },
        exposes: {
          './font': './src/font/segoeui-light.woff2'
        },
        shared: {},
      })
    )

    return config
  },
}

容器应用pages/index.tsx代码：

export default function Home() {
  const { t: translate } = useTranslation('test-app')
  return (
    <>
      <h1>Container index Page</h1>
      <h2>{translate('test')}</h2>
      <Link href="/app2">app2</Link>
    </>
  )
}

子应用app2在本地3001端口运行，容器在3000端口启动时出现错误，求排查问题。

以下是配置和代码中存在的问题及对应修正方案：

1. 配置文件语法错误 #

module. Exports存在多余空格，正确写法是module.exports，这是JavaScript基础语法错误，会直接导致配置文件解析失败。

2. 循环引用的Remote配置 #

容器应用的remotes中添加了指向自身的container配置，容器不需要引用自己作为Remote，会造成循环引用，直接删除该配置项即可。

3. Remote地址格式错误 #

app2的Remote地址使用了app2://localhost:3001/...的错误格式，@module-federation/nextjs-mf要求Remote格式为[name]@[url]，正确写法是app2@http://localhost:3001/_next/static/${location}/remoteEntry.js。

4. 字体资源暴露方式错误 #

直接暴露.woff2文件无法被webpack正确处理，Module Federation通常暴露可执行的JS模块。可以创建一个字体样式模块来导出字体加载逻辑：

创建src/styles/fonts.js：

import localFont from 'next/font/local';

const segoeUiLight = localFont({
  src: '../font/segoeui-light.woff2',
  display: 'swap',
});

export default segoeUiLight;

然后修改next.config.js的exposes配置：

exposes: {
  './font': './src/styles/fonts.js'
},

5. 未导入依赖组件 #

pages/index.tsx中使用了Link和useTranslation但未导入，Next.js会抛出未定义错误，需要添加导入语句：

import Link from 'next/link';
import { useTranslation } from 'next-i18next';

export default function Home() {
  const { t: translate } = useTranslation('test-app')
  return (
    <>
      <h1>Container index Page</h1>
      <h2>{translate('test')}</h2>
      <Link href="/app2">app2</Link>
    </>
  )
}

修正后的完整next.config.js #

const NextFederationPlugin = require('@module-federation/nextjs-mf')
const { i18n } = require('./next-i18next.config')

module.exports = {
  reactStrictMode: true,
  i18n,
  webpack(config, options) {
    const { isServer } = options
    const location = isServer ? 'ssr' : 'chunks'

    config.plugins.push(
      new NextFederationPlugin({
        name: 'home',
        filename: 'static/chunks/remoteEntry.js',
        remotes: {
          app2: `app2@http://localhost:3001/_next/static/${location}/remoteEntry.js`,
        },
        exposes: {
          './font': './src/styles/fonts.js'
        },
        shared: {},
      })
    )

    return config
  },
}

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