react-sortable-tree: SortableTreeWithoutDndContext not work react-dnd@latest

Hi, i have code: App.js


import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';


render() {
  return (
      <DndProvider backend={HTML5Backend}>
        <App />
      </DndProvider>
  )
}

Tree.js

import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';


render() {
  return (
    <SortableTree treeData={state.list} /> 
  )
}

if I try react-dnd@10.0.2 then it does not work (render null), but if I try react-dnd@9.5.1 then everything works

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 15 (3 by maintainers)

Commits related to this issue

Upgrade to ReactDnd@11.1.3. Fixes #665 — committed to TdyP/react-sortable-tree by TdyP 4 years ago

Most upvoted comments

I finally had to use it, so digged out a little more. Upgrading react-sortable-tree depdencies to latest react-dnd fixed the issue. I opened a PR for that. Hopefully this will be merged soon 🤞

TdyP on Jun 26, 2020

Okay, yes there were two instances of react-dnd being loaded: one in-app and other in react-sortable-tree. You can use npm dedupe to force use one source for react-dnd.

swapydapy on Mar 25, 2020

Ah, already fixed this issue, I still having problem using SortableTreeWithoutDndContext.

ayarhlaine on Jul 10, 2020

ok guys, a little update: by downgrade with react-dnd and html5backend to:

  "react-dnd": "^9.5.1",
  "react-dnd-html5-backend": "^9.5.1",

All my tree and react app come back to works, with SortableTree and SortableTreeWithoutDndContext.

Maybe is react-dnd v10 issues or something related to. Seems that in 9.5.1 there is a different way to how HTML5 backends is invoked when app re-render.

Hope this help the developer to have some test with v10 and v9.5.1 together, to find the difference and then fix SortableTree with the latest dnd version.

If I found some other tip, I will write here.

alessandronocera89 on Apr 29, 2020

Okay, yes there were two instances of react-dnd being loaded: one in-app and other in react-sortable-tree. You can use npm dedupe to force use one source for react-dnd.

You saved my work. All replies above did not applied but npm dedupe --legacy-peer-deps command did.

The cause of problem was just same as you mentioned. Thank you

smart-cau on Mar 23, 2022

@TdyP bummer - thanks for the response though! Hopefully before too long the bug is fixed but if I find a workaround or the source of why the downgrade isn’t working I’ll send an update.

jaydavid on Jun 25, 2020

Unfortunately, even with react-dnd@9.5.1 and react-dnd-html5-backend@9.5.1 it doesn’t work in my case.

I’ll try to investigate on my app, hope I can find something useful!

TdyP on May 28, 2020