React-data-grid: Cannot have two HTML5 backends at the same time.

[szopenkrk]

Hi we have problem witch react-data-grid and react-big-calendar which use react-dnd and react-dnd-html5-backend. After create component react-data-grid and open component react-big-calendar application crashed because of Cannot have two HTML5 backends at the same time.
How solve that ? Its important for us

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[x] v0.14.x

Community Supported:
[ ] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[x] Chrome

Should work:
[ ] Firefox
[ ] Safari

---

I'm submitting a ... (check one with "x")

[x ] bug report
[ ] feature request
[ x] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior
Show error Cannot have two HTML5 backends at the same time.

Expected/desired behavior
Should open properly component on the same instance of dnd

[ejnu]

Please provide passing own html5 backend like it is in big-calendar-data

https://github.com/intljusticemission/react-big-calendar/issues/460

[tquetano-r7]

This is actually quite a serious issue ... the way it is constructed, this component will not work with anything else that has react-dnd applied. Which is a lot of things.

An alternative to passing in your own custom backend (which I support, btw, but just thinking of expediency) is that you have the component look for one on context and use it, else fall back to creating your own. This is based on the idea that the application is using DragDropContextProvider provided by react-dnd.

Something like:

static contextTypes = {
  dragDropManager: PropTypes.object
};

getChildContext() {
  const dragDropManager = this.context.dragDropManager || getDefaultDragDropManager();

  return {
    dragDropManager
  };
}

Where the default that is only called when there is not one on context is:

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

let defaultDragDropManager;

export const getDefaultDragDropManager = () => {
  if (!defaultDragDropManager) {
    defaultDragDropManager = new DragDropManager(HTML5Backend);
  }

  return defaultDragDropManager;
};

I've had to do this on a component before that had the same error. This replaces the use of the DragDropContext decorator in favor of using the one that the application uses via provider. This would be completely under-the-hood instead of a new feature, so maybe it could be faster?

[lord-xeon]

I just recently came into this issue as well and it's turning into a blocking issue for me very quickly.

@tquetano-r7 I've tried to locally apply those changes to the DraggableContainer.js file:

react-data-grid/packages/react-data-grid-addons/src/draggable-header/DraggableContainer.js

I'm still getting the error thrown from react-dnd-html5-backend about multiple backends. I've already spent a full day investigating it, and I fear that more time will be sunk into it unless someone can help with a temporary workaround/hack/fix.

Thanks!

[lord-xeon]

I did manage to get my grid working by using the code provided by @tquetano-r7. I had to modify DraggableContainer.js file:

react-data-grid/packages/react-data-grid-addons/src/draggable-header/DraggableContainer.js

As well as my own code. In addition, I had to move up where I originally put the <DragDropContextProvider /> in my code, I think redux was messing with it, which was causing my error.

It should be noted that I needed to add

static contextTypes = {
    dragDropManager: PropTypes.object
};

getChildContext() {
  const dragDropManager = this.context.dragDropManager || getDefaultDragDropManager();

  return {
    dragDropManager
  };
}

To the parent component in every place where I would have done @DragDropManager(HTML5Backend)

[JimLynchCodes]

I don't see going into the node_modules and editing the source as being a good fix. Is there not a valid solution for this error?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[kfranco619]

Is there any progress or news on when this will no longer be an issue? I would like to use this component along with some others that have dnd capabilities.