SortableTreeWithoutDndContext not work react-dnd@latest

[temaivanoff]

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 [email protected] then it does not work (render null), but if I try react-dnd@9.5.1 then everything works

[swapydapy]

Not working for me even with [email protected].
I put a console statement in compiled code in the definition of SortableTreeWithoutDndContext, still getting undefined which results in a null render. I put a consumer as a sibling to SortableTreeWithoutDndContext and that gets a proper object for backend :(

[swapydapy]

It might be because of react-dnd being defined as dependency instead of peerDependency. My hunch is that context object which defines provider and consumer are actually different objects: one in-app world while other in the sortable-tree world. Hence the consumer in react-sortable is not able to see the backend provided in app world.
No idea how react context internally works, will investigate and update.

[swapydapy]

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.

[willopez]

running into this issue.

[alessandronocera89]

Also for me with the latest react-dnd version, use import { SortableTreeWithoutDndContext as SortableTree } from "react-sortable-tree"; not working.
No tree rendered and another strange issue appear when I try to open multiple tree (every tree is stored into json object, and it will open only click on specific button...it works better a few times ago):
Error: Cannot have two HTML5 backends at the same time.
I'm straggling a lot about this issue also, but no way to don't have this error..all app broke and there is no way to resolve.
Can anyone help? I will to try to downgrade react-dnd version to see if the issue still present...

[alessandronocera89]

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.

[johnserun]

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.

This got my project compiling, thanks!

Also on their example you can see that they're using the default export for HTML5Backend, which isn't supported in its current version.. a little hint that they are using an out dated version

[TdyP]

Unfortunately, even with [email protected] and [email protected] it doesn't work in my case.

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

[jaydavid]

@TdyP Did you happen to find anything useful in your investigation? I'm working on an app that is affected by this issue and downgrading to 9.5.1 for both of these libraries does not seem to avoid the blank tree rendering issue.

[TdyP]

@jaydavid unfortunately no. Didn't manage to get this working so I had to found a workaround in my app to avoid the situation where I need this

[jaydavid]

@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]

@TdyP As an update (though probably not helpful) I was eventually able to get the underlying dnd context to be shared using the workaround listed above. I'm guessing it was originally my error that the downgrade did not work, but after coming back to this a little while later and manually clearing things out (and restarting vscode) I was able get a fresh install to behave as expected.

Hopefully you don't end up needing to revisit this before the issue is addressed.

[TdyP]

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 🤞

[ayarhlaine]

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

[smart-cau]

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