时间戳

首页 > 解决方案 > 与 Webpack Module Federation 一起使用时 Recoil Duplicate atom key

reactjs - 与 Webpack Module Federation 一起使用时 Recoil Duplicate atom key

问题描述

我Webpack Module Federation用来创建 2 个 React 应用程序：主机和子。

在主机中，我创建atoms.ts并selector.ts归档，并通过暴露部分下的插件公开它们：

  exposes: {
    "./atoms": "./src/recoil/atoms.ts",
    "./selectors": "./src/recoil/selectors.ts",
  }

在孩子内部，我只是通过遥控器部分使用它：

  remotes: {
    host: "host@http://localhost:3000/remoteEntry.js",
  }

然后，在孩子的代码中，我这样使用：

import {someSelector} from "host/selectors"
const val = useRecoilValue(someSelector);

它工作正常，但我在控制台中收到此警告：

Duplicate atom key "userAuthState". This is a FATAL ERROR in
      production. But it is safe to ignore this warning if it occurred because of
      hot module replacement.

有没有人面临这个问题并知道这是否真的是一个问题或者我们如何隐藏警告？

另一个相关问题：host遗嘱包含<RecoilRoot>和孩子包含可以<RecoilRoot>吗？因为我希望两者都能管理自己的状态，但也共享原子/选择器。

谢谢！

标签： reactjswebpack-module-federationrecoiljs

解决方案

关于你的第二个问题：是的，这完全没问题。嵌套<RecoilRoot>将创建自己的上下文，并且在第二个根下方引用的每个原子都将独立于上根。这也在docs中进行了解释。

关于第一个问题：正如日志所述，只要它发生在开发过程中就可以了。有时在热模块更换过程中，反冲会扔掉原子并重新实例化它们，从而导致这种复制在内部发生。

但是只要这个警告没有出现在你的生产代码中，一切都很好。

推荐阅读