React DnD - "Cannot have two HTML5 backends at the same time."

Just try to make the context of HTML5Backend a singleton. You can check the codes at:

https://github.com/react-dnd/react-dnd/issues/186

https://github.com/react-dnd/react-dnd/issues/708

I faced with similar issue and found workaround by moving

<DragDropContextProvider></DragDropContextProvider>

to the topmost react component.

Structure before:

  App    Component1      Component2        ...        ComponentX with render(<DragDropContextProvider>...<DragDropContextProvider>)

Structure after:

  App with render(<DragDropContextProvider>...<DragDropContextProvider>)    Component1       Component2        ...        ComponentX 

Supposing App is loaded only once and HTML5 backend is not replicated.

You can either create a new file and import DragDropContext where you need it:

import HTML5 from 'react-dnd-html5-backend';import {DragDropContext} from 'react-dnd';export default DragDropContext(HTML5);

Source: https://github.com/react-dnd/react-dnd/issues/708#issuecomment-309259695

Or using Hooks:

import { DndProvider, createDndContext } from "react-dnd";import HTML5Backend from "react-dnd-html5-backend";import React, { useRef } from "react";const RNDContext = createDndContext(HTML5Backend);function useDNDProviderElement(props) {  const manager = useRef(RNDContext);  if (!props.children) return null;  return <DndProvider manager={manager.current.dragDropManager}>{props.children}</DndProvider>;}export default function DragAndDrop(props) {  const DNDElement = useDNDProviderElement(props);  return <React.Fragment>{DNDElement}</React.Fragment>;}

Use:

import DragAndDrop from "../some/path/DragAndDrop";export default function MyComp(props){   return <DragAndDrop>....<DragAndDrop/>}

Source: https://github.com/react-dnd/react-dnd/issues/186#issuecomment-561631584

If you use BrowserRouter then move the DragDropContextProvider out of BrowserRouter:

Source: https://github.com/react-dnd/react-dnd/issues/186#issuecomment-453990887