Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

New DndProvider multiple HTML5 backends issue

See original GitHub issue

Describe the bug Since using the new DndProvider I get an Cannot have two HTML5 backends at the same time. error after re-rendering the component where DndProvider is set. According to the documentation the DndProvider should be at the very top of the application but only one re-render will break the whole app. Also when using the react-router it’s not the best idea to always place it at the top.

To Reproduce Steps to reproduce the behavior:

Place the DndProvider in a component
Cause a re-render e.g. with useState
Application will break

Expected behavior The DndProvider should use the already created backend.

Example https://codesandbox.io/s/gs988

Additional context The legacy HOC DragDropContext didn’t have this issue.

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

SKT-Shurimacommented, Aug 19, 2020

Describe the bug Since using the new DndProvider I get an Cannot have two HTML5 backends at the same time. error after re-rendering the component where DndProvider is set. According to the documentation the DndProvider should be at the very top of the application but only one re-render will break the whole app. Also when using the react-router it’s not the best idea to always place it at the top.

To Reproduce Steps to reproduce the behavior:

Place the DndProvider in a component

Cause a re-render e.g. with useState

Application will break

Expected behavior The DndProvider should use the already created backend.

Example https://codesandbox.io/s/gs988

Additional context The legacy HOC DragDropContext didn’t have this issue. @Nico142 Yeap, I agree with you, but I viewed the page that you provided, it happen again. Here’s what I did with the different versions. =8.0 :https://codesandbox.io/s/react-dnd-backend-issue-forked-uyf8z?file=/src/index.js <8.0 :https://codesandbox.io/s/react-dnd-backend-issue-forked-bccjz?file=/src/index.js

0reactions

darthtrevinocommented, Jun 21, 2019

Fixed in https://github.com/react-dnd/react-dnd/pull/1422, which will be released in the next patch version

Top Results From Across the Web

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

I faced with similar issue and found workaround by moving <DragDropContextProvider></DragDropContextProvider>.

Troubleshooting - React DnD - GitHub Pages

This page is dedicated to the problems you might bump into while using React DnD. ... Currently React DnD only provides an HTML5...

react-dnd-multi-backend - npm

DndProvider (new API). You can use the DndProvider component the same way you do the one from react-dnd (docs for more information), ...

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

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-html5-backend examples - CodeSandbox

Learn how to use react-dnd-html5-backend by viewing and forking react-dnd-html5-backend example apps on CodeSandbox.