Vite monorepo 中缺少反应上下文答案

【问题标题】：React context missing in Vite monorepoVite monorepo 中缺少反应上下文
【发布时间】：2022-10-05 02:12:24
【问题描述】：

我正在尝试将我的 lerna monorepo 从 create-react-app 切换到 vite。我的回购结构大致是：

- packages
  - shared
    - useSomeHook.ts
    - useSomeHook2.ts
  - app1
    - SomeConsumer.tsx

useSomeHook 包装了一个 3rd 方钩子（redux 的 useSelector）并返回一些值。 useSelector 需要从 redux 存储上下文提供程序调用树。我在共享包中设置了带有 redux 装饰器的 Storybook，并且我验证了 useSomeHook 在共享包中使用时可以正常工作。问题是，当我在 app1 中的 SomeConsumer.tsx 中导入和使用 useSomeHook 时，redux 上下文现在未定义。

我 100% 绝对肯定它是在 app1 的 redux 提供程序中调用的。 app1 中useSelector 的所有裸调用都按预期工作，我从我的共享包中导入了这个钩子。

我也有 useSomeHook2 包装了一个不同的第 3 方钩子，该钩子也依赖于显示相同问题的上下文（react-router 的useHistory）。共享包与tsc 捆绑时没有问题。我认为主要区别在于tsc 输出的是commonjs 而vite 输出的是esm，但我不知道从哪里开始调试。

【问题讨论】：

嘿，我不确定这是否有帮助，但我想您可以先使用 pnpm 工作区创建工作区，例如我的 Vue 3 with pnpm workspace 样板，然后再添加 Lerna。我也可以建议Lerna-Lite 作为我维护的一个较小的替代方案，它还支持来自 pnpm 的workspace: 协议，Lerna-Lite 也使用它，它优先考虑本地 deps 而不是从 npm 注册表下载。顺便说一句，我从未使用过 React

标签： reactjs react-context vite tsc lerna

【解决方案1】：

我的错误是没有使用rollup.externals 数组。共享挂钩尝试从共享包中使用上下文，而不是在 app1 中调用它们的位置。我的理解是 externals 数组修复了这个分辨率

【讨论】：