React父组件访问useDialog Context正常 子组件取值为undefined仅导入时复现

核心问题本质 #

你遇到的是React Context多实例冲突，仅在组件库被下游项目导入时触发，本地测试正常是因为本地开发环境只有一份Context/React实例。

具体触发原因 #

• 组件库打包时未将react、react-dom列为外部依赖，导致组件库产物自带独立的React副本，和下游项目的React实例不互通。两份实例下创建的Context完全隔离，Provider在下游React实例中注册，组件库内的子组件自然读不到Context值。
• 组件库内部DialogContextHook引用不一致：如果Context在多个文件被重复创建，或者DialogProvider、useDialog从不同路径导入Context，也会产生多个实例，导致数据不互通。
• 下游项目混用导入来源：如果下游用的DialogProvider是本地自行实现/从错误路径导入，而导入的FooterButton用的是组件库内部的Context，两者自然无法匹配。

修复步骤 #

• 调整组件库依赖配置：在package.json中将react、react-dom放到peerDependencies字段，不要放在dependencies中，避免下游重复安装React。
• 调整打包配置：在rollup/webpack/vite等打包工具的配置中，将react、react-dom加入external排除列表，强制组件库使用下游项目提供的React实例。
• 统一Context引用路径：确保DialogContextHook仅在一个文件中创建并导出，组件库内部所有用到该Context的逻辑（useDialog、DialogProvider）都从同一固定路径导入，不要出现相对路径引用混乱的问题。
• 下游使用时统一导入来源：所有DialogProvider、相关业务hooks、组件都从同一个组件库入口导入，不要本地复制代码自行创建Context实例。

验证方法 #

可以分别在组件库的useDialog逻辑、下游项目的Provider调用处打印DialogContextHook实例，对比两者是否严格相等（===），如果返回false即可确认是多实例问题。

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