Including react-querybuilder in a drag-n-drop application causes errors of "Cannot have two HTML5 backends at the same time."

Hello,

We are trying to use react-querybuilder in a React application that also uses Drag-N-Drop (via react-dnd).

Unfortunately, including react-querybuilder causes an infinite loop of errors of Cannot have two HTML5 backends at the same time.. We have attempted a workaround of overriding the rootElement of our application’s DndProvider, but that seems to break drag-n-drop into react-querybuilder from the application.

A potential fix for this issue is the approach taken by react-sortable-tree, where the library exports the component as SortableTreeWithoutDndContext, relying on the application to create a DndProvider: https://github.com/frontend-collective/react-sortable-tree/blob/master/src/react-sortable-tree.js#L960

If necessary, I can try to create a diff with the changes that replicate the above fix.

Thank you! Kyrylo Stepanchuk

[kyrylostepanchuk]

@jakeboone02 I just tested the latest 4.2.0 version with our application, and it seems to have worked. Many thanks! One last piece that was missing was involving our own webpack configuration. It may be due to the way dependencies are pulled in by npm (react-querybuilder would have its own copy). This was the fix:

react-dnd/react-dnd#3349

Our webpack config had to include this section to import all react-dnd code from the same place.

resolve: {
  alias: {
    'react-dnd': path.resolve('node_modules/react-dnd')
  }
},

Just FYI, in case it comes up for someone else.

[jakeboone02]

@kyrylostepanchuk I implemented your suggested fix in #282 (also, I hope you don’t mind, I marked the commit as co-authored by you – I can undo that if you want).

Can you fork this codesandbox (it uses the new code), try to recreate the scenario and see if the problem is resolved?