Invariant Violation: Expected drag drop context find when deploy to server in minimal CodeSandbox · Issue #3149

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account Invariant Violation: Expected drag drop context find when deploy to server in minimal CodeSandbox #3149 Invariant Violation: Expected drag drop context find when deploy to server in minimal CodeSandbox #3149 Pet3ris opened this issue Mar 18, 2021 · 2 comments

Describe the bug
I'm running the following code in a sandbox

import { useDrag, useDrop, DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
export default function App() {
  var matchDrag = useDrag({
    type: "FILE"
  });
  var matchDrop = useDrop({
    accept: "FILE",
    drop: function (item, monitor) {
      console.log("dropped");
  });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <DndProvider backend={HTML5Backend}>
        <div ref={matchDrag[1]}>Drag</div>
      </DndProvider>
      <DndProvider backend={HTML5Backend}>
        <div ref={matchDrop[1]}>Drop</div>
      </DndProvider>
      <h2>Start editing to see some magic happen!</h2>
    </div>
When I run it, it triggers this issue: Uncaught Invariant Violation: Expected drag drop context.
Reproduction
Live Reproduction
Expected behavior

It should allow the drag item to be dropped into the drop div.
Screenshots
Desktop (please complete the following information):
firefox
          Found it!
DndProvider has to be external of the component in which useDrag / useDrop hooks are used. It should be factored out of the App component like so:
<DndProvider backend={HTML5Backend}>
  <App />
</DndProvider>