Uncaught Error: Expected to find a valid target.

Describe the bug
Uncaught Error: Expected to find a valid target.
Similar to #361, but in a different scenario.

I am using nested sources and targets. I have a list of items (each item being both a drag source and a drag target of type 'item'), with each item having a number of subitems (each subitem being both a drag source and a drag target of type 'subitem').

When swapping a dragged subitem with a hovered subitem within the same item, everything works as expected.

To Reproduce
When swapping a dragged subitem with a hovered subitem of a different item, the following error occurs:

Uncaught Error: Expected to find a valid target.
at invariant (browser.js:38)
at DragDropMonitorImpl../node_modules/dnd-core/lib/DragDropMonitorImpl.js.DragDropMonitorImpl.canDropOnTarget (DragDropMonitorImpl.js:60)
at HTML5Backend.js:428
at Array.some ()
at HTML5Backend../node_modules/react-dnd-html5-backend/lib/HTML5Backend.js.HTML5Backend.handleTopDragOver (HTML5Backend.js:427)

Expected behavior
The swap occurs without the error.

Desktop:

• OS: macOS High Sierra @ 10.13.5
• Browser: Chrome @ 68.0.3440.106 (Official Build) (64-bit)
• react@16.4.2
• react-dnd@5.0.0
• react-dnd-html5-backend@5.0.1

[ad1992]

this happens for me as well +1

[delijah]

+1

[pixelass]

I can reproduce this on a setup like this:

@DropTarget(
	(props: DroppableProps) => props.accepts,
	{},
	(connect: DropTargetConnector, monitor: DropTargetMonitor) => ({
		connectDropTarget: connect.dropTarget()
	})
)
class Dustbin extends React.Component<DroppableProps> {
	public render() {
		return this.props.connectDropTarget && this.props.connectDropTarget(<div>{this.props.children}</div>);
	}
}

In my case the error occurs in the following line:

//	(props: DroppableProps) => props.accepts,

When I changed the code to anything but a function the error went away.

NO ERRORS

@DropTarget(
	["list", "of", "accepted", "types"],
	{},
	(connect: DropTargetConnector, monitor: DropTargetMonitor) => ({
		connectDropTarget: connect.dropTarget()
	})
)

NO ERRORS

@DropTarget(
	"my accepted type",
	{},
	(connect: DropTargetConnector, monitor: DropTargetMonitor) => ({
		connectDropTarget: connect.dropTarget()
	})
)

Sidenote:

The OP's error occurs while the hover method is active.

I get a different error when I perform the same action on drop

dragDrop.js:125 
Uncaught TypeError: Cannot read property 'drop' of undefined
    at dragDrop.js:125
    at Array.forEach (<anonymous>)
    at DragDropManagerImpl.drop (dragDrop.js:123)
    at Object.drop (DragDropManagerImpl.js:40)
    at HTML5Backend../node_modules/react-dnd-html5-backend/lib/HTML5Backend.js.HTML5Backend.handleTopDrop (HTML5Backend.js:477)
(anonymous) @ dragDrop.js:125
drop @ dragDrop.js:123
(anonymous) @ DragDropManagerImpl.js:40
./node_modules/react-dnd-html5-backend/lib/HTML5Backend.js.HTML5Backend.handleTopDrop @ HTML5Backend.js:477

[butchmarshall]

Started getting this error after upgrading a project from v2.5.4 to v6.0.0.

Everything seems to work fine on both v2.5.4 and v6.0.0 (other than v6.0.0 throwing an error in the console) so I'm not sure if there is no issue on v2.5.4 or if its just not being reported.

[realb0t]

+1

[NZOleg]

+1

[maciejzukowski]

The issue was resolved for me by making sure the target was still in the DOM. I had some conditional case that removed the target when the source was dragged into it causing this error to occur.

[bexoss]

+1, How do I avoid this error?

[gaoupon]

make sure your the key of your item unrelated to the index to prevent the dom node being removed.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[GNARGNARDAVE]

I added a debounce to the hover handler (with trailing option) and that solved the issue. The components were updating too quickly by setting the state before DnD could catch up, and the target ID had changed by the time the user dropped the item. So for those of you that could get the above solutions to work, maybe this may help.

[benjamincassidy]

@GNARGNARDAVE can you please provide sample code for how to add a debounce to the hover handler?

[GNARGNARDAVE]

This is what I used and it worked for me. You should add a console output to observe the target id as you hover the item - and you'll notice that the target id changed/doesn't sync because everything is happening too quick; try adding it before and after to see the result.

onDragOver={handleDragOver}

let debouncedFn:any = null;

const handleDragOver = (e:any):void => {

        e.persist();
        e.preventDefault();

        if (!debouncedFn) {
            debouncedFn = debounce(()=> {
                e.dataTransfer.dropEffect = "move";
                const parentId = (e.target.parentNode) ? e.target.parentNode[keyId] : "";
                const targetId = e.target[keyId] || parentId; // items can be dropped on a child
                const hoverIndex = (targetId) ? state.data.findIndex((item:any) => item[keyId].toString() === targetId.toString()) : -1;

                if (hoverIndex !== state.hoverIndex) {
                    setState((prevState: IState<ITableData>) => ({
                        ...prevState,
                        hoverIndex,
                    }));
                }
            }, 100);
        }

        debouncedFn();
    };