使用Webpack Module Federation时Recoil出现重复atom key警告如何解决？

警告成因 #

该警告触发的核心原因是当前项目同时满足两个条件：

1. host和child分别打包了独立的Recoil依赖实例，没有配置为单例共享依赖
2. 两端各自配置了<RecoilRoot>，从host导出的atom会在两端的Recoil实例中分别注册同个key，触发重复校验

警告风险 #

开发阶段如果仅做静态值读取可能不会感知到问题，但生产环境会出现明确故障：两端的Recoil状态树完全隔离，在host侧更新共享atom的值，child侧无法拿到更新，反之亦然，当前功能正常只是因为两端初始值暂时一致，并未触发跨应用状态更新。

解决方案 #

根据你的业务需求二选一即可：

方案1：需要跨应用状态同步（host改值child同步更新） #

1. 在host和child的Module Federation配置中新增shared配置，强制全应用仅用一份Recoil实例：

// host、child的webpack Module Federation配置均添加以下内容
shared: {
  react: { singleton: true },
  "react-dom": { singleton: true },
  recoil: { singleton: true }
}

2. 删除child侧的<RecoilRoot>，仅保留host最外层的一个<RecoilRoot>，所有状态都存在同一个全局状态树中，即可消除警告，同时跨应用状态更新可正常同步。

方案2：不需要跨应用状态同步，仅复用atom/selector定义，两端状态完全隔离 #

这种场景下两端各自配置<RecoilRoot>是合理的，消除警告有两种方式：

1. 给child侧的<RecoilRoot>添加override属性，允许当前Root覆盖已注册的atom key，不会触发重复警告：

<RecoilRoot override>
  {/* child应用路由/组件 */}
</RecoilRoot>

2. 为不同应用的atom key添加命名空间前缀，比如host侧atom key加host/前缀，child侧自有atom加child/前缀，从根源避免key冲突。

双RecoilRoot合理性判定 #

• 如果需要跨应用共享状态、同步更新：双Root不合理，隔离的状态树无法实现同步，必须用单Root+单例Recoil依赖的方案。
• 如果需要child可脱离host独立运行，仅复用atom的定义逻辑，不需要跨应用状态同步：双Root是合理方案，添加override属性即可解决警告问题。

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