Uncaught Invariant Violation: Expected to find a valid target.

[francisrod01]

Uncaught Invariant Violation: Expected to find a valid target.

I'm facing this issue when I drag a tag.

Envs:

• react@16.10.2
• react-dom@16.10.2
• react-tag-input@6.4.1
• react-dnd@5.0.0
• react-dnd-html5-backend@3.0.2

A related tag here: Uncaught Error: Invariant Violation: Expected to find a valid target

[jmfsilva]

DND and a little buggy.
It rarely works and most of the times i'v that error.
Envs:

• "react": "^16.9.0"
• "react-dom": "^16.9.0"
• "react-dnd": "^5.0.0" (as recommended)
• "react-dnd-html5-backend": "^3.0.2", (as recommended)

[jameswyse]

I'm getting the same error. I think it's because the key prop isn't stable

Currently it's set to key={${tag.id}-${index}} in ReactTags.js:389
Changing it to key={tag.id} fixed the problem for me!

[stale]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

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

[tankorsmash]

I'm having the same issue with dragging a tag and throwing the invariant error about not being able to find a target.

Same as above, except

"react": "^16.8.0"
"@hot-loader/react-dom": "^16.8.0"

Some potential causes is inconsistent ids (maybe based on their position on the array) and keys. We'll see if I can make any progress on my own error.

edit: it seems like ReactTags (or my own code somewhere...) is adding the index to the key of the Tag, which needs to not happen so that dnd can track the values, I think.

This is likely happening in ReactTags.js, which was introduced in this commit to allow duplicate/unique tags.

I'm not sure what to do, because if you remove the idx variable there, you can no longer have duplicate tags. Maybe @prakhar1989 has an idea.