Chonky React报错：无法同时存在两个HTML5后端问题求助

问题总结 #

• 使用Chonky v2.3.2时，文件浏览器内拖放文件直接导致应用崩溃
• 手动在应用顶层配置DndProvider，并通过disableDragAndDropProvider={true}禁用组件内置的提供者后，拖放功能完全失效
• React DevTools中仅显示1个DndProvider，但控制台仍报错提示存在多个拖拽后端

项目环境 #

• React + TypeScript + Vite项目，启用HMR与StrictMode
• 多页面嵌套路由架构

排查与解决步骤 #

1. 对齐拖拽依赖版本
   Chonky内部依赖react-dnd和react-dnd-html5-backend，手动引入顶层DndProvider时，必须保证项目安装的依赖版本与Chonky内部依赖版本完全匹配。在项目根目录执行npm ls react-dnd react-dnd-html5-backend查看版本树，若存在多版本依赖，执行npm dedupe或者手动指定匹配版本重新安装。

2. 处理StrictMode重复渲染问题
   开发环境下StrictMode会触发组件重复渲染，可能导致DndProvider被初始化两次。可以临时关闭StrictMode测试，或确保顶层DndProvider仅在应用最外层渲染一次，避免嵌套路由中重复包裹。

3. 确认参数传递正确性
   确保disableDragAndDropProvider={true}直接传递给<ChonkyFileBrowser>根组件，而非其子组件，检查代码中是否存在参数传递错误。

4. 显式指定拖拽后端
   即使DevTools只显示一个DndProvider，仍可能存在隐性后端冲突。在顶层DndProvider中显式指定后端：

   import { DndProvider } from 'react-dnd';
   import { HTML5Backend } from 'react-dnd-html5-backend';
   
   function App() {
     return (
       <DndProvider backend={HTML5Backend}>
         {/* 应用内容，包含Chonky组件 */}
       </DndProvider>
     );
   }
   

5. 测试基础拖放功能
   暂时移除Chonky组件，创建极简拖拽测试组件，验证顶层DndProvider是否正常工作。若极简组件能正常拖拽，说明问题出在Chonky的配置或版本兼容上。

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