使用react-dnd开发组件库时出现Expected drag drop context错误如何解决

问题原因 #

该问题由react-dnd依赖重复实例化导致：React Context 与创建它的包实例强绑定，只有同一个包实例导出的Provider和Consumer/useContext才能正常通信。
当前你的项目中存在两套独立的react-dnd实例：

• 应用侧node_modules下的react-dnd，你应用中引用的DndProvider来自这个实例
• 组件库自身node_modules下的react-dnd，组件中调用的useDrag来自这个实例
  两个实例创建的Dnd Context完全独立，自然无法跨实例读取上下文值，本地应用内写的组件使用的是同一套react-dnd实例，所以运行正常。

解决方案 #

按优先级从高到低可选择以下方案：

• 调整组件库依赖配置：确保react、react-dnd仅出现在组件库package.json的peerDependencies字段中，不要放在dependencies字段内；如果本地开发需要安装这些依赖，放在devDependencies即可
• 配置组件库打包规则：打包组件库时将react、react-dnd等公共依赖标记为external，不要将其打包进组件库产物中，以rollup为例，配置如下：

  export default {
    // 其他配置
    external: ['react', 'react-dom', 'react-dnd', 'react-dnd-html5-backend']
  }
  

• 本地开发配置依赖重定向：如果是monorepo开发结构，在应用侧打包工具的resolve.alias配置中，将react、react-dnd的导入路径统一指向应用根目录的node_modules，避免加载组件库自带的依赖副本
• Context链式传递：你提到的嵌套Provider传递值的方案也可正常使用，本质是手动将上层Context的值同步到子包自己的Context中，属于绕开依赖实例隔离的临时解决方案

内容的提问来源于stack exchange，提问作者Charlie Benger-Stevenson