NextJS+Module Federation远程组件样式加载异常求助

问题背景 #

基于React 18、Webpack 5、Next.js 13搭建的Module Federation架构项目：

• 远程项目droninfocomponent独立运行时样式完全正常
• 宿主项目baseguicomponent加载远程组件DronInfoApp时，出现部分样式缺失、渲染错乱的情况
• 远程项目通过_app.js引入了全局样式文件，需要在宿主项目中共享这些样式

解决方案 #

1. 暴露远程项目的全局样式文件 #

远程项目需要通过Module Federation将全局样式文件暴露，允许宿主项目引入：

修改远程项目next.config.js的exposes配置：

new NextFederationPlugin({
  name: 'droninfocomponent',
  filename: 'static/chunks/remoteEntry.js',
  exposes: {
    './DronInfoApp': './components/DronInfoApp.jsx',
    './GlobalStyles': './styles/globals.css', // 新增：暴露全局样式
    './ComponentStyles': './components/index.css' // 新增：暴露组件专属样式
  },
  // ...其他shared配置
})

在宿主项目的_app.js中动态导入远程样式（适配SSR禁用的配置）：

import '../styles/globals.css'; // 宿主自身全局样式
import dynamic from 'next/dynamic';
import React from 'react';

// 动态导入远程样式，避免SSR加载问题
const RemoteGlobalStyles = dynamic(() => import('droninfocomponent/GlobalStyles'), { ssr: false });
const RemoteComponentStyles = dynamic(() => import('droninfocomponent/ComponentStyles'), { ssr: false });

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <RemoteGlobalStyles />
      <RemoteComponentStyles />
      <Component {...pageProps} />
    </>
  );
}

2. 精简Shared配置，排除非运行时依赖 #

当前远程项目的shared配置包含了eslint、autoprefixer、tailwindcss等工具类依赖，这些无需作为共享模块，会导致不必要的冲突，需移除：

修改远程项目next.config.js的shared配置：

shared: {
  react: { singleton: true, requiredVersion: '^18.2.0' },
  react-dom: { singleton: true, requiredVersion: '^18.2.0' },
  next: { singleton: true, requiredVersion: '13.4.13' },
  antd: { singleton: true, requiredVersion: '^5.4.6' },
  '@ant-design/icons': { singleton: true, requiredVersion: '^5.0.1' },
  'common-gui': { singleton: true, requiredVersion: '0.0.1' },
  axios: { singleton: true, requiredVersion: '^1.3.4' },
  classnames: { singleton: true, requiredVersion: '^2.3.1' }
}

宿主项目的shared配置也需同步精简，避免直接引入所有package.json依赖：

shared: {
  react: { singleton: true, requiredVersion: '^18.2.0' },
  react-dom: { singleton: true, requiredVersion: '^18.2.0' },
  next: { singleton: true, requiredVersion: '13.4.13' },
  antd: { singleton: true, requiredVersion: '^5.4.6' },
  '@ant-design/icons': { singleton: true, requiredVersion: '^5.0.1' },
  'common-gui': { singleton: true, requiredVersion: '0.0.1' }
}

3. 远程组件直接引入自身样式 #

Next.js的样式处理逻辑特殊，远程组件需确保自身样式被webpack正确收集，建议在DronInfoApp.jsx中直接引入组件样式，而非仅依赖_app.js的全局引入：

// DronInfoApp.jsx
import './index.css'; // 直接引入组件样式
import React from 'react';

const DronInfoApp = () => {
  // 组件业务代码
};

export default DronInfoApp;

4. 调整样式加载顺序 #

样式加载顺序会影响渲染优先级，确保远程样式在宿主样式之后加载，这样远程组件样式可正确覆盖宿主冲突样式：

• 宿主_app.js中先引入自身全局样式，再引入远程样式（如步骤1所示）

5. 避免CSS模块化类名冲突（若使用模块化样式） #

如果远程项目使用了CSS模块化，需配置自定义类名规则，避免与宿主项目类名冲突：
在远程项目next.config.js中添加：

module.exports = {
  // ...其他配置
  cssModules: {
    generateScopedName: '[name]__[local]___[hash:base64:5]'
  }
};

验证步骤 #

• 重启远程项目（端口3200）和宿主项目（端口3201）的开发服务
• 访问宿主项目页面，检查远程组件样式是否正常渲染
• 打开浏览器开发者工具，查看元素样式规则，确认缺失样式是否已加载

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