使用Module Federation分离React UIkit时获取DefaultTheme纯JS对象问题

问题原因 #

你用的dynamic（推测是Next.js的next/dynamic）是专门用来懒加载React组件的工具，它会把导入的模块包装成LoadableComponent。但Theme是纯JS对象，并非React组件，所以不能用这种方式导入。

解决方案 #

直接用原生动态导入语法，提取远程模块里导出的theme对象即可：

1. 基础动态导入（非组件场景） #

// 异步获取主题对象
import('uikit/Theme').then((module) => {
  const theme = module.theme;
  // 这里直接使用theme对象，比如配置样式系统
  console.log(theme.border.card);
});

2. 在React组件中使用 #

如果要在React组件内用主题，结合useState和useEffect实现异步加载：

import { useState, useEffect } from 'react';

function App() {
  const [theme, setTheme] = useState(null);

  useEffect(() => {
    // 加载远程主题模块
    import('uikit/Theme').then(({ theme }) => {
      setTheme(theme);
    });
  }, []);

  if (!theme) {
    return <div>加载中...</div>;
  }

  // 直接使用主题对象配置样式
  return (
    <div style={{ border: theme.border.card }}>
      测试主题样式
    </div>
  );
}

export default App;

3. 同步导入（非SSR场景） #

如果你的构建流程支持同步导入远程模块，也可以直接静态导入：

import { theme } from 'uikit/Theme';

// 直接使用theme对象
console.log(theme.border.cardLight);

额外确认 #

确保远程端的DefaultTheme.ts文件正确导出了theme对象，你的现有代码已经符合要求：

export const theme: DefaultTheme = {
  border: {
    card: '1px solid rgb(221, 221, 221)',
    cardLight: '1px solid rgba(221, 221, 221, 0.4)',
    scrollable: "1px solid $meeseeks.color['neutrals.200']",
  },
  // 其他主题配置...
};

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