React-dnd: Removing dragged element on hover throws "Expected to find a valid target."

Created on 24 Jan 2016  ·  14Comments  ·  Source: react-dnd/react-dnd

hi guys,

i cannot really post a specific code example as it's too cluttered at the moment but i think iv'e isolated the steps required to reproduce the issue.

  • start drag
  • on hover on dragged item (the item is both drop and drag connected)

    • remove state corresponding to dragged item

the error was thrown at DragDropMonitor.prototype.canDropOnTarget
because it couldn't find a target with the targetID (obviously).

use case: i"m building a sortable tree and i need to relocate the dragged & hovered item
to after it's parent node:

  • if it is the last item in a nested list
  • and the hovered item has an horizontal offset to the left
    (normal behaviour for tree's: http://pqx.github.io/react-ui-tree/)

on more thing: while the error occurs, it still works.

thanks!

bug

Most helpful comment

same problem here

image

All 14 comments

+1 I am also having this issue

Please provide an example reproducing the issue. I can take a look then.

This is probably fixed in 2.1.0.
I’ll close but please let me know if not, and I’ll reopen.

@gaearon I recently upgraded to react-dnd v5 and this issue is replicated again. Seems like it worked fine in 2.6.0 and also 3.0.2 but breaks in 4.0.5 and 5.0.0.

Any news on this?

@gaearon any update?

Same problem here

same here in 5.0.0

same problem here

same problem here

image

same problem , Any suggestions for fix ?

Anyone had any luck with this?

I have this issue on react-sortable-tree external source sample. Dragging to a red area.

https://frontend-collective.github.io/react-sortable-tree/?path=/story/advanced--drag-from-external-source
https://github.com/frontend-collective/react-sortable-tree/blob/master/stories/external-node.js

vendors~main.91acd83f50dfbcb80997.bundle.js:1 Uncaught Invariant Violation: Expected to find a valid target. at module.exports (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:592) at DragDropMonitorImpl.canDropOnTarget (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:186636) at DropTargetMonitorImpl.canDrop (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:71541) at https://frontend-collective.github.io/react-sortable-tree/main.91acd83f50dfbcb80997.bundle.js:1:132866 at DragDropContainer.getCurrentState (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:87049) at DragDropContainer._this.handleChange (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:84210) at handleChange (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:185746) at dispatch (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:168058) at Object.endDrag (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:199234) at HTML5Backend.handleTopDragEndCapture (https://frontend-collective.github.io/react-sortable-tree/vendors~main.91acd83f50dfbcb80997.bundle.js:2:152270)

Was this page helpful?
0 / 5 - 0 ratings