Next.js 14用Webpack构建微前端遇Compilation类型错误求助

错误原因 #

直接使用webpack原生的ModuleFederationPlugin会和Next.js内部封装的webpack版本产生实例冲突，导致Compilation类型不匹配的错误。Next.js对webpack做了定制化封装，不能直接挂载原生插件。

解决方案 #

使用官方推荐的Module Federation适配包@module-federation/nextjs-mf来配置：

1. 安装依赖 #

npm install @module-federation/nextjs-mf
# 或使用yarn
yarn add @module-federation/nextjs-mf
# 或pnpm
pnpm add @module-federation/nextjs-mf

2. 修改next.config.mjs配置 #

替换原有的webpack配置逻辑，使用适配包提供的工具：

import { withModuleFederation } from '@module-federation/nextjs-mf';

export default withModuleFederation({
  name: 'remoteApp',
  filename: 'static/remoteEntry.js',
  exposes: {
    './Button': './pages/components/Button',
    // 按需添加更多需要暴露的组件
  },
  shared: {
    react: { singleton: true, eager: true },
    'react-dom': { singleton: true, eager: true },
  },
});

3. 补充入口文件配置（Pages Router场景） #

在pages/_app.js或pages/_app.tsx的顶部添加如下代码，确保远程模块能正确加载：

import '@module-federation/nextjs-mf/src/include-defaults';

4. 验证启动 #

重新执行next dev，项目即可正常启动。

额外注意事项 #

• 若暴露的组件是客户端组件，需在组件文件顶部添加'use client'指令，避免SSR相关问题。
• 若使用App Router，需在app/layout.js中添加上述的include-defaults导入，并将暴露组件的路径调整为app/components/Button格式。

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