Invariant Violation: Expected targetIds to be registered.

[miadabrin]

Hi there. We are getting this error (although the functionality is okay and works fine). Do you have any idea how it can happen? couldn't figure it out from the source code.

[PorterNan]

I also met this problem, it show me Expected sourceIds to be registered, is there any case could cause this happen?

[mogelbrod]

I'm also getting error reports of this, but unable to reproduce myself.

[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.

[miadabrin]

Ignoring this wouldn't help so anyone?

[julienR2]

Hey there !
We got the same error, and after digging a bit it was due to uncontrolled drag'n'drops -> D'n'd not handled by the React-dnd directly. Since we wanted to make sure that all the dnd were controlled through React-dnd anyway, we preventDefault the onDragStart event depending on the event.target/event.currentTarget/etc..

Doesn't explain much the source of the issue, but I hope it can help !

[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.

[clytras]

I faced this issue when I've had DndProvider nested inside my components. Moving <DndProvider backend={Backend}> at the top level and wrapping the <App/> component with it made this error disappear.

EDIT
It always happens after a hot reload (save) using react-hot-loader.

[d07RiV]

Moved provider to the very top (even into the ReactDOM.render call), still getting the error after every hot reload and have to refresh the page.

[jjjhill]

@d07RiV did you ever find a solution? I have multiple drop targets (some nested), and have DndProvider as the top level component, and I'm getting this error on every hot-reload still.

[danteYoon]

Though clytras 's try, this issue hasn't been resolved. It seems Invariant Violation: Expected targetIds to be registered error still remains.

[danteYoon]

if this error only shows on "hot-reload", problem might be resolved in production mode, still, error free should be guaranteed before deploy..

[xairoo]

This should be reopened. Problem appears after a hot reload when performing a dnd action.

[diegogallovich]

Make sure your imports in the file where your DND provider is being used are ordered correctly.

Ex:

WRONG:
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { DndProvider } from 'react-dnd'
import { HTML5Backend as Backend } from 'react-dnd-html5-backend'
import { AppStateProvider } from './AppStateContext'

RIGHT:
import React from 'react'
import ReactDOM from 'react-dom'
import { DndProvider } from 'react-dnd'
import { HTML5Backend as Backend } from 'react-dnd-html5-backend'
import './index.css'
import App from './App'
import { AppStateProvider } from './AppStateContext'

Conclusion:
Do not import local modules before foreign modules

[kdfriedman]

Currently experiencing same problem but occurs only when I'm manually using onDragStart on child component which is wrapped in my <DndProvider backend={HTML5Backend}> parent component. I've tried fixing using both suggestions above but neither have worked for me.

[Ho-yeong]

still occurred and don't know why

[adarshmishra07]

Make sure your imports in the file where your DND provider is being used are ordered correctly.

Ex:

WRONG:
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { DndProvider } from 'react-dnd' import { HTML5Backend as Backend } from 'react-dnd-html5-backend'
import { AppStateProvider } from './AppStateContext'

RIGHT:
import React from 'react'
import ReactDOM from 'react-dom'
import { DndProvider } from 'react-dnd' import { HTML5Backend as Backend } from 'react-dnd-html5-backend'
import './index.css'
import App from './App'
import { AppStateProvider } from './AppStateContext'

Conclusion:
Do not import local modules before foreign modules

This worked for me thanks

[clytras]

@dieguiviti @adarshmishra07 There is an ESLint rule about the correct import order that does exacly that, warn you about (or fix) the wrong import order. Externmal module imports should always be placed before parent/sibling/current directories imports. You can read about the rule here import/order: Enforce a convention in module import order.

You should always use ESLint even not in auto/save mode, just to get some nice warnings/tips that will help resolve such issues.

[valtism]

Unfortunately, the workaround does not work for the larger codebase I'm working on, no matter how far up the import chain I put the imports. I would love to see this issue re-opened because it seems like something that should work regardless of import ordering.

[xairoo]

Unfortunately, the workaround does not work for the larger codebase I'm working on, no matter how far up the import chain I put the imports. I would love to see this issue re-opened because it seems like something that should work regardless of import ordering.

Totally agree. I imported the react-dnd DndProvider at the top level since I work with react-dnd.

ReactDOM.render(
	<DragAndDrop>
		<App />
	</DragAndDrop>,
	document.querySelector('#root'),
);

Cannot go higher =)

[ottworks]

bump

[dreamyguy]

Just wanted to mention that I get this error with a stripped-down example from DnD itself, on a NextJS app. https://react-dnd.github.io/react-dnd/examples/sortable/simple

[hlz]

I'm also having this issue with a fairly simple Next.js app. Dragging after a hot reload throws the error.

[raghurambachu]

Refresh the app/ run the app again probably this might help. For me this worked.

[valtism]

This seems to be fixed in v14.0.4 🥳

#3290

[beewolf233]

This seems to be fixed in v14.0.4 🥳

#3290

are you sure??

[devinMcArthur]

Still experiencing this issue with v14.0.5.

Using react-dnd in combination w/ SlateJS. Once an element is dragged, SlateJS is remounting the component. On this initial mount, the useDrop handlerId variable is not set and may be causing this error. It is functioning perfectly fine, but with NextJS this error is hard to ignore.

[beewolf233]

hello I am experiencing this issue too

[patrik-meixner]

Same for me on Next.js project.

[dimadk24]

For anybody experiencing this with NextJS's HMR, I found as a workaround to use automatic full page refresh instead of hot reload using the live-server package: the idea is to run live-server together with NextJS server and connect to live-server's Websocket from NextJS app:

1. Install live-server and concurrently
2. Add this code (simplified version of injected code from live-server) to the main NextJS file (index.js or whatever):

if (process.env.NODE_ENV === 'development') {
  if (typeof window !== 'undefined') {
    new WebSocket('ws://127.0.0.1:8080/ws').onmessage = function(msg) {
      if (msg.data === 'reload') window.location.reload()
    }
    console.log('Live reload enabled.')
  }
}

3. Change dev command to concurrently "next dev" "live-server --no-browser"

The drawback is that you'll entirely opt-out of NextJS's HMR and run 2 servers.

[hd-o]

This is my current working solution with Next.js, not pretty, but works for local development:

// file: .scripts/monkey-patch-dnd.js

// Temporary monkey patch
// Remove invariant check from dnd-core
// Prevent https://github.com/react-dnd/react-dnd/issues/763

const fs = require('fs')
const path = require('path')
const hoverPath = 'node_modules/dnd-core/dist/esm/actions/dragDrop/hover.mjs'
const filePath = path.resolve(process.cwd(), hoverPath)

if (!fs.existsSync(filePath)) process.exit(1)

const content = fs.readFileSync(filePath).toString()
const invariantLineContent = `invariant(target, 'Expected targetIds to be registered.');`
const updatedContent = content.replace(invariantLineContent, '')

fs.writeFileSync(filePath, updatedContent)

console.log('• MONKEY PATCHED DND \n')

// file: package.json

{
  "scripts": {
    "postinstall": "node .scripts/monkey-patch-dnd.js"
  },
}

Note: rm -rf .next before starting next dev

[joshkel]

If I'm following these discussions correctly, there two or three common scenarios for this error message:

• Intermittently, in production builds, possibly related to CPU load - see, e.g., Uncaught Invariant Violation: Expected targetids to be registered after dragging too fast #3403. I believe or hope that fix: "Invariant Violation: Expected targetIds to be registered." #3409 will fix this.
• When using hot reload with Next.js - as described by several comments here. Does anyone have a sample project that demonstrates this? I tried putting together a local test case but was unable to reproduce the error.
• When using SlateJS - see here. Does anyone have a sample project or codesandbox.io page demonstrating this?

[Aromokeye]

There's a latest fix to this problem and after updating the package, the error no longer appears.

[rojiwon0325]

I 'm using it latest version, but error is appeared. I think, this appear only in StrictMode.

[brabbuss]

None of the above resolved the issue for me, but this stack thread helped me out - had to do with race conditions for me. In case it's helpful, my solution:

I'm working in React. Placed my custom onDrop logic inside of a useEffect that only fires off when a piece of state wasDropped is true.

wasDropped is set inside of the DropTarget specification (second param of the react-dnd DropTarget function).

[kvasa]

This issue could also appear if you are adding new DOM nodes during drag over elements, for example, based on isOver flag.

{isOver && <div .../>}

If you need to add special elements for a better UX I recommend having these elements already in the DOM for example with display: none style and only changing this style according to isOver flag.

[beewolf233]

yes i also has this question

[SoTwinky]

Same here, anyone ?

[pushparajsingh]

if you remove strict mode in index.js file . it will solve

[PierrickMerliExt]

if you remove strict mode in index.js file . it will solve

No Strict Mode on my website

[izhan]

We ran into this issue before and traced it to a dragged item unmounting while being dragged. I'd double check that you don't have any complex state transitions while hovering that would cause something similar

[wangjingbo-wang]

yes i also has this question

is have a solution?