minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Expected drag drop context error

renzhiVivio opened this issue · comments

Hello, a part of my codes leading error is showing below:

ReactDOM.render(


<Tree
tree={tree}
rootId={0}
render={(
node: NodeModel,
{ depth, isOpen, onToggle }
) => (

)}
sort={false}
dragPreviewRender={(
monitorProps: DragLayerMonitorProps
) => }
onDrop={handleDrop}
classes={{
root: styles.treeRoot,
draggingSource: styles.draggingSource,
dropTarget: styles.dropTarget
}}
initialOpen={true}
/>
,document.getElementById('projectPageContainer'));

and get this error:
Expected drag drop context
invariant
./src/index.ts:28
25 | );
26 | } else {
27 | let argIndex = 0;

28 | error = new Error(
| ^ 29 | format.replace(/%s/g, function() {
30 | return args[argIndex++];
31 | })
View compiled
▼ 21 stack frames were expanded.
useDragDropManager
./node_modules/@minoru/react-dnd-treeview/node_modules/react-dnd/dist/esm/hooks/useDragDropManager.js:12
useDragLayer
./node_modules/@minoru/react-dnd-treeview/node_modules/react-dnd/dist/esm/hooks/useDragLayer.js:22
useTreeDragLayer
http://localhost:8000/vendors~p__Project.js:7907:72
DragLayer
http://localhost:8000/vendors~p__Project.js:8146:22
renderWithHooks
./node_modules/react-dom/cjs/react-dom.development.js:14985
mountIndeterminateComponent
./node_modules/react-dom/cjs/react-dom.development.js:17811
beginWork
./node_modules/react-dom/cjs/react-dom.development.js:19049
HTMLUnknownElement.callCallback
./node_modules/react-dom/cjs/react-dom.development.js:3945
invokeGuardedCallbackDev
./node_modules/react-dom/cjs/react-dom.development.js:3994
invokeGuardedCallback
./node_modules/react-dom/cjs/react-dom.development.js:4056
beginWork$1
./node_modules/react-dom/cjs/react-dom.development.js:23964
performUnitOfWork
./node_modules/react-dom/cjs/react-dom.development.js:22776
workLoopSync
./node_modules/react-dom/cjs/react-dom.development.js:22707
renderRootSync
./node_modules/react-dom/cjs/react-dom.development.js:22670
performSyncWorkOnRoot
./node_modules/react-dom/cjs/react-dom.development.js:22293
scheduleUpdateOnFiber
./node_modules/react-dom/cjs/react-dom.development.js:21881
updateContainer
./node_modules/react-dom/cjs/react-dom.development.js:25482
(anonymous function)
./node_modules/react-dom/cjs/react-dom.development.js:26021
unbatchedUpdates
./node_modules/react-dom/cjs/react-dom.development.js:22431
legacyRenderSubtreeIntoContainer
./node_modules/react-dom/cjs/react-dom.development.js:26020

@renzhiVivio Thanks for the error report.

What version of the package are you using?
Or can you show us the contents of package.json?

@renzhiVivio Thanks for the error report.

What version of the package are you using? Or can you show us the contents of package.json?

Thanks for your quick reply!

"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@minoru/react-dnd-treeview": "^1.5.9",
"react-dnd": "^14.0.4",
"react-dnd-html5-backend": "^14.0.2",

does it matter I have my own react-dnd dependencies?

@renzhiVivio Thanks for the detailed information.

@minoru/react-dnd-treeview uses react-dnd v13.1.1 internally.
This is because some of the packages used by @minoru/react-dnd-treeview specify react-dnd v13.1.1 in peerDependencies.

Therefore, if you overwrite the installation with react-dnd v14, the dependency will be broken and you will get an error.

To avoid the error, please remove react-dnd v14 and re-install v13.

npm install react-dnd@13.1.1

@renzhiVivio Thanks for the detailed information.

@minoru/react-dnd-treeview uses react-dnd v13.1.1 internally. This is because some of the packages used by @minoru/react-dnd-treeview specify react-dnd v13.1.1 in peerDependencies.

Therefore, if you overwrite the installation with react-dnd v14, the dependency will be broken and you will get an error.

To avoid the error, please remove react-dnd v14 and re-install v13.

npm install react-dnd@13.1.1

that's a bad news, our app is based on react-dnd v14. And as I research, v13 to v14 is huge diff
Anyway, thanks for your kindly reply

I also experience this issue. Tried to install react-dnd@13.1.1 still does not work. Also, going back to dnd 13 is a problem as per renzhiVivio comment.

Any chance of a new release addressing this issue? Thanks