NX中Module Federation使用react-icons时版本不满足问题

问题原因 #

单独运行app-1时，它作为独立宿主应用，Module Federation会自动尝试共享项目依赖。但react-icons的子目录node_modules/react-icons/lib下没有带版本号的package.json，导致工具无法自动识别版本，进而触发版本不匹配错误；同时你的shell应用虽配置了不让react-icons共享，但app-1自身的Module Federation配置未做同样设置，所以单独运行时会走默认共享逻辑。

解决方案 #

方案1：禁止app-1共享react-icons（推荐，匹配你想要tree-shaking的需求） #

找到app-1的module-federation.config.js，添加和shell应用一致的shared配置，明确阻止react-icons被共享：

/**
 * @type {import('@nrwl/devkit').ModuleFederationConfig}
 **/
const moduleFederationConfig = {
  name: 'app-1',
  // 保留原有配置（如exposes等）
  shared: (name, config) => {
    // 不让react-icons被共享，直接打包到app-1自身bundle
    if (name === 'react-icons') {
      return false;
    }
    return undefined;
  },
};

module.exports = moduleFederationConfig;

这样app-1单独运行时会把react-icons打包到自身代码里，不会触发共享模块的版本检查，同时保留tree-shaking效果。

方案2：手动指定react-icons的共享版本（若需共享场景） #

如果后续有共享react-icons的需求，可在app-1的shared配置里手动指定版本，解决版本识别问题：

shared: {
  'react-icons': {
    version: '4.4.0', // 替换为你项目中实际安装的react-icons版本
    singleton: true, // 根据业务需求选择是否启用单例模式
  },
  // 其他共享配置
}

同时需确保shell应用的shared配置同步该版本设置，避免跨应用共享时的版本冲突。

内容的提问来源于stack exchange，提问作者Barry Michael Doyle