Next.js 13微前端：借助nextjs-mf共享依赖库组件的问题

一、第三方库组件（Recharts折线图）无法跨应用加载的问题 #

模块联邦完全支持共享依赖第三方库的组件，你遇到的加载失败问题大概率是共享配置或组件加载方式不对，可按以下步骤排查解决：

• 显式配置共享依赖：在子项目的next.config.js中，将Recharts及其核心依赖（React、ReactDOM等）加入共享配置，开启singleton模式保证全局只有一个依赖实例，避免版本冲突或重复加载：

  const { withModuleFederation } = require('@module-federation/nextjs-mf');
  
  module.exports = withModuleFederation({
    name: 'childApp',
    exposes: {
      './LineChart': './components/LineChart',
      './Button': './components/Button',
    },
    shared: {
      react: { singleton: true, requiredVersion: false },
      'react-dom': { singleton: true, requiredVersion: false },
      recharts: { singleton: true, requiredVersion: false },
    },
  });
  

• 标记客户端组件：Next.js 13 App Router下，包含第三方交互逻辑的组件必须添加'use client'指令，否则会在服务端渲染阶段出错。在你的折线图组件顶部加上：

  'use client';
  import { LineChart, Line, XAxis, YAxis } from 'recharts';
  // 组件代码...
  

• 父项目使用动态导入+Suspense：父项目导入远程组件时，用React.lazy动态加载并配合Suspense处理加载状态，避免SSR兼容性问题：

  'use client';
  import React, { Suspense } from 'react';
  const RemoteLineChart = React.lazy(() => import('childApp/LineChart'));
  
  // 组件内使用
  <Suspense fallback={<div>加载折线图...</div>}>
    <RemoteLineChart />
  </Suspense>
  

二、Tailwind CSS JIT模式下共享组件样式失效的问题 #

Tailwind JIT模式会基于配置的content目录扫描类名生成样式，子项目的组件样式编译时不会被父项目的Tailwind捕获，导致样式丢失，可通过以下方案解决：

• 子项目确保样式被正确编译：子项目的tailwind.config.js中，content必须包含所有要暴露的组件文件，保证组件用到的Tailwind类名被编译进CSS：

  // 子项目tailwind.config.js
  module.exports = {
    content: [
      './components/**/*.{js,ts,jsx,tsx}',
      './app/**/*.{js,ts,jsx,tsx}',
    ],
    // 其他Tailwind配置...
  };
  

• 父项目扫描远程组件类名：如果父项目能访问子项目组件的本地路径（比如通过npm链接或本地依赖），可直接将路径加入父项目的content；如果是纯远程加载，可手动声明共享组件用到的类名：

  // 父项目tailwind.config.js
  module.exports = {
    content: [
      './components/**/*.{js,ts,jsx,tsx}',
      './app/**/*.{js,ts,jsx,tsx}',
      // 手动声明远程组件用到的类名文件
      './src/remote-tailwind-classes.js',
    ],
    // 其他配置...
  };
  

  然后在remote-tailwind-classes.js中列出子项目组件用到的类名：

  export const remoteClasses = [
    'bg-blue-500',
    'text-white',
    'p-4',
    // 其他用到的Tailwind类名
  ];
  

• 子项目单独暴露组件样式：子项目将组件的CSS单独打包并暴露，父项目直接导入该CSS文件。比如子项目创建styles/remote-components.css，导入Tailwind并包含组件样式，然后在next.config.js中添加暴露：

  // 子项目next.config.js
  exposes: {
    './LineChart': './components/LineChart',
    './LineChartStyles': './styles/remote-components.css',
  },
  

  父项目中导入：

  import 'childApp/LineChartStyles';
  

• 使用Tailwind Preset统一样式：子项目创建Tailwind Preset定义共享的主题、样式，父项目引入该Preset，保证样式规则一致：

  // 子项目tailwind.preset.js
  module.exports = {
    theme: {
      extend: {
        colors: {
          primary: '#1a202c',
        },
      },
    },
  };
  

  父项目tailwind.config.js中引入：

  module.exports = {
    presets: [require('childApp/tailwind.preset')],
    content: [/* 父项目路径 */],
  };
  

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