React-dnd: Uncaught Error: Invariant Violation: Expected to find a valid target.

Can you share your code?

Yeah, please put up the runnable code somewhere.
It would also help a lot of you could use the version on NPM so it'd be easier to debug the issue.

I found the error while setting up an example for you guys. The object that I returned in beginDrag didn't contain an id. Probably React had an issue with that, which might have caused that error in React-Dnd.

Interesting, thanks! We don't really impose any restrictions on what beginDrag() returns as long as it's a plain object so I wonder what the error flow was.

Sorry for adding to an old thread, but since this is the only reference to this error on all of the internet, I thought someone might find the following useful in the future.

I had the same error, but the issue was that I had a component (similar to Card in the examples) that was decorated with _both_ drag and drop wrappers.

When simulateBeginDrag began, it sent the _drop target_ (instead of the drag source) to the validator, which correctly failed. The solution was to go one level deep ( with getDecoratedComponentInstance() ) when getting the handler id.

@yannisbarlas great find. I ran into the same exact issue. Maybe there can be a mention of this in the testing docs?

@yannisbarlas Thanks a ton for the find! Greatly helped me tons of frustration :)

Just in case someone stumbles on this error and issue, I had a similar issue when composing a sortable list and each item having a key composed of the concatenation of its id and its index on the list.
The fix was simply done by setting a proper (ie, consistent) key for the element being dragged.

@yannisbarlas Do you have a code example of your solution?

Sorry for the late response @damiangreen, the notification email flew right past me.

The code has been deprecated (it's been a while), but you can check it out here.

If someone still runs in this issue, please note that the element of the list you are mapping by needs to have a persistent key prop. In my case I was dispatching a Redux action to change the items in list, and then providing the key to the mapped element like this:

blocks.map((block, idx) => {
  <React.Fragment key={`${block.name}_${idx}`}>
    ...
  <React.Fragment />
})

which apparently fires the error, because the idx is changing on-the-fly.

thanks @chulanovskyi
for me it looked like this:
JSX arr.map((item, idx) => ( <Item item={item} // key={`${idx}_${item.id}`} // this was busted because idx key={item.key} // when adding this to the array elsewhere i use a count for uniqueness index={idx} > </Item> ))

For me this error is caused by dynamically created drop areas - when the last item is moved from a drop area React re-renders without that area and this seems to cause the exception. Perhaps it's a race condition where the area is removed just before moving the item though the groups are derived from the same items change hmm

For me this error is caused by dynamically created drop areas - when the last item is moved from a drop area React re-renders without that area and this seems to cause the exception. Perhaps it's a race condition where the area is removed just before moving the item though the groups are derived from the same items change hmm

Hi @DominicTobias
I also have dynamically created drop areas.
How did you fix it?

@raymond-ong

I also have dynamically created drop areas.
How did you fix it?

In other words the problem can be that you've created parent (upper level) component again.
In this case react-dnd lost id (his inner id) it has working with and output error.

In my case it was, that I've updated id parameter of the parent entity when update state in the reducer (move columns within row, and update row id when columns change their places). After removing updating id functionality everything starts working correctly.

I also have this issue. In my case it only happens when drop target returns false on canDrop. Can anyone post your solution to this problem? Someone mentioned that it's related to missing ID, but I'm not sure where to put the id?

I'm facing the same issue, I managed to tweak an example from the docs, you can see it here by dragging/dropping around the first element: https://codesandbox.io/s/broken-feather-qf0f2?file=/src/Container.jsx

I also created an issue with all the details (maybe I should have just posted here?) #2693

I had the same problem, and I fixed it like this:

my code looked like

const ParentOfCards = () => {    

     const [ cards, setCards ] = useState([ ... ])

    const CardComponent = ({ card, index }) => {
       return (/**/)
    }
    return (
        <div>
            { cards.map( CardComponent ) }
        </div>
    )

}

it turns out you can't put CardComponent inside ParentOfCards ( I think it has to do with re-renders ), so I solved it separating CardComponent from the ParentOfCards scope:

const ParentOfCards = () => {    

     const [ cards, setCards ] = useState([ ... ])


    return (
        <div>
            { cards.map( CardComponent ) }
        </div>
    )

}

const CardComponent = ({ card, index }) => {
       return (/**/)
}

And now ( after two days of debugging :c ) it works! 😁

@marcelomrtnz Thank you so much
You saved my lot of time on this issue on mobile

I was facing same issue while drag drop on mobile with react dnd lib but after removing row column divs from list and keeping only cards list it worked for me without this error. It got that valid target on mobile browser

I got this idea from your post so thank you @marcelomrtnz

I have the same issue. https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
Here is sandbox. drag item 1ba over item 1, and then item 1ba down again.