Invariant Violation: Expected drag drop context find when deploy to server

[TingOOOgniT]

My app is working well on my local environment but when I deploy to the server, the console prints error: 'Invariant Violation: Expected drag drop context find' when deploying to the server.
I totally have no idea about what's wrong. Could you help give me some advice on what may be a root cause?
My local node version is 8.11.3. And I use 8.11.3 on the server to build and an express server to serve the static files under default cloud node environment (v6.7.0).
I am using:
"react-dnd": "^9.0.1"
"react-dnd-html5-backend": "^9.0.0"
"react-dnd-touch-backend": "^9.0.2"

[TingOOOgniT]

I upgraded my packages to the latest and the error occurs in my local environment.

[TingOOOgniT]

It’s because I have a ^ and I use yarn in local but npm in the cloud to build so I got different package version in local and dev.
And when I use 9.3.3 and 9.3.2, I got the same error: 'Invariant Violation: Expected drag drop context find. I lost the context.
And 9.2.1 is fine.

[coxrichuk]

+1 I am getting this too

Environment looks like:

"react": "^16.8.6", "react-dnd": "^9.3.4", "react-dnd-html5-backend": "^9.3.4", "react-dom": "^16.8.6",

[sa-scole]

This probably means you've got DndProvider wrapping a component too low on your component tree.

[jamiewinder]

Did you solve this? I had the same issue and it turned out I had multiple react-dnd libraries of different versions being bundled in my app. Hopefully this helps someone.

[sauravgarg540]

I am also facing the same issue. Did someone find the solution, please share.

[binarybaba]

I wasn't exporting the <DndProvider />. Once I did that, everything worked fine.

[roweldev-jukin]

you should wrap your test file component like so:

<DndProvider backend={HTML5Backend}> <Component /> </DndProvider>

[Foxhoundn]

you should wrap your test file component like so:

<DndProvider backend={HTML5Backend}> <Component /> </DndProvider>

I really wish this info would be available on this page http://react-dnd.github.io/react-dnd/docs/overview.

Otherwise users have to scroll through a whole implementation of the chess board to find this.

[markusmauch]

I'm getting the Expected drag drop context error, too. For me this works only if the DndProvider is the immediate parent node of the component that uses useDrag. It works with an older version though (9.0.0). However, the hint

This should be mounted near the top of our application (meaning the DndProvider)

is definitely wrong.

[jacobdanielferguson]

@markusmauch

Thanks - this saved me a huge headache. Yeah, the documentation is definitely not accurate here.

[andrewlorenz]

For me I fixed the issue by having the useDrop and associated div using the ref from that in its own component, as opposed to just inline JSX. I didn't change a single line of code - just generated the droppable div from its own component outside of the component wrapping it with DndProvider ..

[DininduKanchana]

Hi. I also faced this issue. The solutions provided here directed me to the right path. I added it to very top of the component tree.
To the index.tsx

ReactDOM.render(
  <React.StrictMode>
    <DndProvider backend={HTML5Backend}>
      <App />
    </DndProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

The imports --

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

[c4lliope]

Looks like this is the documentation page we're seeking;
can we make this more visible on the docs website?
https://github.com/react-dnd/react-dnd/blob/e8bd6436548d96f6d6594f763752f424c2e0834b/packages/docsite/markdown/docs/03%20Using%20Hooks/DndProvider.md

[brunohlippert]

Had the same issue here. In my case, I was trying to add the droppable div to a library that was going to be consumed by another application, where the context would be defined. My solution was to move the react-dnd of the library to the devDependencies and as peerDependencie.

[cjmafei]

Hi. I also faced this issue. The solutions provided here directed me to the right path. I added it to very top of the component tree. To the index.tsx

ReactDOM.render(
  <React.StrictMode>
    <DndProvider backend={HTML5Backend}>
      <App />
    </DndProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

The imports --

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

Did you solve this?

[DininduKanchana]

Hi. I also faced this issue. The solutions provided here directed me to the right path. I added it to very top of the component tree. To the index.tsx

ReactDOM.render(
  <React.StrictMode>
    <DndProvider backend={HTML5Backend}>
      <App />
    </DndProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

The imports --

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

Did you solve this?

yes

[PrestonWinstead]

I've tried both suggestions in this thread -- wrapping my app at the most core, root level that I can, and wrapping it immediately above the component that's using DND. No matter what, I get this error. Any updates on the correct way to handle this?

[SanjeevThalod]

Hi. I also faced this issue. The solutions provided here directed me to the right path. I added it to very top of the component tree. To the index.tsx

ReactDOM.render(
  <React.StrictMode>
    <DndProvider backend={HTML5Backend}>
      <App />
    </DndProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

The imports --

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

This solved the error for me

[Dustin-QB]

I don't want to add the Dnd Provider any higher in your tree than necessary, since only a small portion of the app is actually using it. I solved it by wrapping sibling components in a fragment.

export default function DndComponentExample() {
  return (
    <div className="max-h-full overflow-auto border-l border-gray-200 py-10">
	<> // added a fragment here
	    <CustomComponent someProps={props} />
	    <CustomComponent someProps={otherProps} />
	</>
	<DndProvider backend={HTML5Backend}>{someDraggableInputs.map(renderDraggableInputs)}</DndProvider>
    </div>
	);
}```