NextJS中使用SortableTree报错：Cannot have two HTML5 backends at the same time

一、修复重复DndBackend冲突问题 #

问题根源是SortableTree组件内部已经集成了DndProvider和HTML5Backend实例，你在外层手动添加的DndProvider导致了重复初始化，触发了冲突错误。

直接移除手动添加的DndProvider及相关导入即可解决，修改后的代码如下：

import { UniType } from "@/types/unitType";
import React, { useState } from "react";
import "@nosferatu500/react-sortable-tree/style.css";
import SortableTree from "@nosferatu500/react-sortable-tree";

type Props = {
  units: UniType[];
};

export default function UnitsModifier({ units }: Props) {
  const [treeData, setTreeData] = useState([
    { title: "Chicken", children: [{ title: "Egg" }] },
    { title: "Fish", children: [{ title: "fingerline" }] },
  ]);   

  return (
    <div style={{ height: 400 }}>
      <SortableTree
        treeData={treeData}
        onChange={(treeData) => setTreeData(treeData)}
      />
    </div>
  );
}

二、解决SortableTreeWithoutDndContext不显示的问题 #

如果你的项目需要共享全局Dnd上下文，必须使用SortableTreeWithoutDndContext的话，按以下步骤排查修复：

• 正确导入组件：确保导入的是带命名导出的组件

  import { SortableTreeWithoutDndContext } from "@nosferatu500/react-sortable-tree";
  

• 确保DndProvider只挂载一次：不要在组件内部重复包裹，建议在项目根组件（如_app.tsx）中全局挂载一次DndProvider，或者在当前组件中只保留一层包裹，同时保证树容器的高度设置正确（组件需要固定高度才能渲染内容）：

  import { UniType } from "@/types/unitType";
  import React, { useState } from "react";
  import "@nosferatu500/react-sortable-tree/style.css";
  import { DndProvider } from "react-dnd";
  import { HTML5Backend } from "react-dnd-html5-backend";
  import { SortableTreeWithoutDndContext } from "@nosferatu500/react-sortable-tree";
  
  type Props = {
    units: UniType[];
  };
  
  export default function UnitsModifier({ units }: Props) {
    const [treeData, setTreeData] = useState([
      { title: "Chicken", children: [{ title: "Egg" }] },
      { title: "Fish", children: [{ title: "fingerline" }] },
    ]);   
  
    return (
      <div style={{ height: 400 }}>
        <DndProvider backend={HTML5Backend}>
          <SortableTreeWithoutDndContext
            treeData={treeData}
            onChange={(treeData) => setTreeData(treeData)}
          />
        </DndProvider>
      </div>
    );
  }
  

• 检查样式导入：确认@nosferatu500/react-sortable-tree/style.css已正确导入，没有被NextJS的样式配置规则忽略。

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