I'm getting an error on MultiBackend.js:135:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

when used in combination with rc-slider.

I've made a minimal example here: https://codesandbox.io/s/dnd-slider-0npvo?file=/src/App.js

To reproduce:

• Open the example on a mobile device
• Tap on the slider
• See error in console

Am I missing something, or this library doesn't work with new react-dnd API?

I pass it like this:

<DndProvider backend={MultiBackend(HTML5toTouch)}>

and receive following error:

TypeError: manager.getActions is not a function

Related to #31 backend: TouchBackend({ enableMouseEvents: true })
should be backend: TouchBackend, options: { enableMouseEvents: true },

Or do laptops with touch just emulate mouse events?
To be safe, I'd rather have the HTML and touch backends active at the same time...I've had both active together via my https://github.com/jcoreio/react-dnd-multi-backend I hastily wrote a long time ago, and never saw any problems. Though I don't have a touch laptop to test it on

When we drag using the mouse, the expectation is that we can click and drag anywhere on the element to initiate the drag. Consider a file explorer in a code editor for example. We can usually click and drag the filename to move it.

When we drag using touch, the expectation is that we click on a drag handle. The reason why is because we need a way to scroll and usually that means dragging anywhere except on the drag handle. Consider how we reorganize bookmarks on an iPhone. We initiate the move by dragging on the "three bars" icon on the right.

From the current API, it does not appear this is possible (or is not documented).

My current scenario is that I have a tree structure with drag bars on the right. I want to allow mouse drags to start by dragging the tree items (they can also drag the drag bars but it is not necessary). For touch, I only want to initiate dragging by dragging the bars.

Heya,
I'm using react-dnd-multi-backend with rdndmb-html5-to-touch as described in the readme, but I'm getting an error when loading the page.

You must specify a valid 'transition' property (either undefined or the return of 'createTransition') in your Backend entry: [object Object]

I've created a codesandbox to demonstrate.

I also tried using the "old API" approach described in the readme, but that leads to another error. What is the correct way to implement this library at the moment?

Object.assign is not a function

This package is great! Do you know of a scroll library that works well with this package, for both the html5-backend and the touch-backend? When the user is dragging an item and they reach the bottom edge of the screen, I want the parent container to scroll so they can drag the item to the bottom of the container.

Hi,

This is some great code, and I'd like to make it work with a new front-end to dnd-core that I wrote for Angular. That project is at https://cormacrelf.github.io/angular-skyhook/ & https://github.com/cormacrelf/angular-skyhook/. Edit: it's called angular-skyhook now.

Backends in react-dnd are not supposed to care about what code provides them with DOM elements to latch onto, and this is true of MultiBackend, except that some some react-specific helpers are bundled into the package. I wouldn't expect that you rebuild those helpers for any other frontend -- the preview component would have to be quite different, and it would mess up your build scripts enormously -- but I would appreciate splitting the package into agnostic and react-specific parts. A major version bump would prevent accidental upgrades. The agnostic part should depend only on dnd-core.

Since v9 : https://github.com/react-dnd/react-dnd/releases/tag/v9.0.0 react DND doesn't support DragDropContext. Is there any way to use dnd-multi-backend with the latest version of the react DND?

Trying on a project using React v0.14.7.

Does react-dnd-multi-backend require most recent versions of React?

Hi,

Neither Touch nor HTML5 backends work with svg, but MouseBackEnd does https://github.com/zyzo/react-dnd-mouse-backend.

Do you have any plans to support arbitrary backends with this project? Would love to use this but currently blocked because I need both HTML5 and Mouse backends

Error with small screen sizes and bootstrap.

I made a gif to help.

GIF

Support the react-dnd version 11 which introduces small breaking change.

Thanks.

I'm trying to import the usePreview hook via:

import { usePreview } from 'react-dnd-multi-backend';

but it's giving me the following error:

Module '"../../../node_modules/@types/react-dnd-multi-backend"' has no exported member 'usePreview'.

Below are my installed dependencies:

"@types/react-dnd-multi-backend": "^6.0.0",
"react-dnd": "^11.1.1",
"react-dnd-html5-backend": "^11.1.1",
"react-dnd-multi-backend": "^6.0.2",
"react-dnd-touch-backend": "^11.1.3",

Would be great if I could get some help on this.

Thanks in advance!

So I've set everything up and it works wonderful when I click and drag and object (on computer and on touch screen), but if I click anywhere else on the screen (in the DragDropContext), something happens that stops me from being able to click on anything else - I have to refresh the page to get it all working again.

You can see the app here if it helps: https://github.com/willnix86/english-rules

It's like clicking on anything other than a draggable disables mouse events. Any thoughts?

Hello,

I just updated all my dependencies, and I'm encountering the following error:

Context

• "react-dnd": "5.0.0",
• "react-dnd-html5-backend": "5.0.1",
• "react-dnd-multi-backend": "3.1.2 and 3.1.8"

Error

ERROR in ./node_modules/react-dnd-multi-backend/lib/HTML5toTouch.js
    Module not found: Error: Can't resolve 'react-dnd-touch-backend' in '/Users/name/Documents/project/node_modules/react-dnd-multi-backend/lib'
     @ ./node_modules/react-dnd-multi-backend/lib/HTML5toTouch.js 11:28-62
     ...
     @ ./src/components/App/AppView.jsx
     @ ./src/components/App/AppContainer.js
     @ ./src/components/App/index.js
     @ ./src/main.jsx

Any idea?

I'm using react-dnd-multi-backend in an Electron app and just received this error from a user on a Windows Surface tablet:

error: (appStore) TypeError: Cannot read property 'unshift' of null at TouchBackend.handleMoveStart (C:\Users\XXXXXX\AppData\Local\Programs\XXXXXX\resources\app.asar\node_modules\…
 error: (appStore) TypeError: Cannot read property 'unshift' of null at TouchBackend.handleMoveStart (C:\Users\XXXXXXX\AppData\Local\Programs\XXXXXXX\resources\app.asar\node_modules\react-dnd-touch-backend\dist\Touch.js:384:36) at HTMLDivElement.wrapped

Error is raised at this line of react-dnd-touch-backend:

key: 'handleMoveStart',
        value: function handleMoveStart(sourceId) {
            this.moveStartSourceIds.unshift(sourceId); //HERE
        }

Here is my implementation of react-dnd-multi-backend:

render(
  <DragDropContextProvider backend={MultiBackend(HTML5toTouch)}>
    <MuiThemeProviderNext theme={mui1Theme}>
      <MuiThemeProvider muiTheme={muiOldTheme}>
        <Main />
      </MuiThemeProvider>
    </MuiThemeProviderNext>
  </DragDropContextProvider>,
  document.getElementById('root')
);

I'm wondering if react-dnd-multi-backend may be in html5backend mode and then switch to touch and this.moveStartSourceIds is undefined or something along those lines.

Any help is greatly appreciated! Thank you!

Reproduction: https://codesandbox.io/s/react-dnd-example-11-ow923

Potentially related to the removal of DragDropContext (replaced by DndProvider)

Hi,

I'm trying to use dnd-multi-backend with DndProvider of react-dnd as described in dnd-multi-backend documentation and i'm getting a compilation error because of different types from what
DndProvider is expected.

Code:

import { DndProvider } from 'react-dnd';
import MultiBackend from 'react-dnd-multi-backend';
import Html5toTouch from 'react-dnd-multi-backend/lib/HTML5toTouch';


<DndProvider backend={MultiBackend} options={Html5toTouch}>
 // ...
</DndProvider>

Error:

Failed to compile:

Type '{ children: Element[]; backend: (backends: Backends) => BackendFactory; options: Backends; }' is not assignable to type '(IntrinsicAttributes & { manager: DragDropManager; } & { children?: ReactNode; }) | (IntrinsicAttributes & { backend: BackendFactory; context?: any; options?: any; debugMode?: boolean | undefined; } & { ...; })'.
  Type '{ children: Element[]; backend: (backends: Backends) => BackendFactory; options: Backends; }' is not assignable to type '{ backend: BackendFactory; context?: any; options?: any; debugMode?: boolean | undefined; }'.
    Types of property 'backend' are incompatible.
      Type '(backends: Backends) => BackendFactory' is not assignable to type 'BackendFactory'.
        Types of parameters 'backends' and 'manager' are incompatible.
          Property 'backends' is missing in type 'DragDropManager' but required in type 'Backends'.

Relevant dependencies:

"dependencies": {
    "@types/react": "^16.8.19",
    "@types/react-dnd": "^3.0.2",
    "@types/react-dnd-html5-backend": "^3.0.2",
    "@types/react-dnd-multi-backend": "^3.0.5",
    "@types/react-dom": "^16.8.4",
    "@types/react-router-dom": "^4.3.3",
    "react": "^16.8.6",
    "react-dnd": "^9.3.4",
    "react-dnd-multi-backend": "^3.2.2",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
  },

TypeError: Cannot read property 'getMonitor' of undefined in index js

52 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
53 |
54 | var _default = function _default(managerOrOptions) {

55 | if (managerOrOptions.getMonitor) {
56 | return new _MultiBackend.default(managerOrOptions);
57 | }
58 |

Using the SemVer on the dependencies introduces a newer version of React-dnd-preview which uses a significantly higher version of react-dnd which doesn't have support react-15 as it uses the new React 16+ Context APIs.

Thus breaking anything not upgraded.

Shouldn't useObservePreviews be exported? Otherwise, how can we determine whether to draw the separate preview layer downstream in the component hierarchy?

The preview component fail with the following error:

TypeError: this.context.dragDropManager is undefined
render
node_modules/react-dnd-multi-backend/lib/Preview.js:48

  45 | _createClass(Preview, [{
  46 |   key: 'render',
  47 |   value: function render() {
> 48 |     if (!this.context.dragDropManager.getBackend().previewEnabled()) {
  49 |       return null;
  50 |     }
  51 |     return _react2.default.createElement(_reactDndPreview2.default, this.props);

Getting

Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Here:

With code from https://github.com/react-dnd/react-dnd/blob/master/examples/04%20Sortable/Cancel%20on%20Drop%20Outside/Container.js and this project enabled, like so

// @flow
import { DragDropContext, DragDropContextProvider } from 'react-dnd';
// import HTML5Backend from 'react-dnd-html5-backend';
import MultiBackend from 'react-dnd-multi-backend';
import HTML5toTouch from 'react-dnd-multi-backend/lib/HTML5toTouch'; // or any other pipeline

export const Backend = MultiBackend(HTML5toTouch);
export { DragDropContextProvider as Provider }
export default (App: any) => DragDropContext(Backend)(App);

Hey, thanks for a great package!

I'm having some trouble understanding the preview, it would be great if there was some complete example of how this should be used besides just the one line
<ReactDnDMultiBackend.Preview generator={this.generatePreview} />

Where does ReactDnDMultiBackend come from? Shouldn't this be MultiBackend, i.e. the default export?

My first try didn't go too well. Hopefully it's something simple I've missed.

When I start dragging in touch mode (Chrome). The preview is at the top of the parent container (and dropTarget).

It works fine with react-dnd-html5-backend

I've made a quick game of questions where one uses a drag and drop to put the answers in the right order.
At first I made it just in react-dnd as I didn't need to support mobile.
Now mobile support has been requested as well as Desktop support I've tried implementing your library (which is a perfect solution for me btw, great work!)

So I've swapped out react-dnd for react-dnd-multi-backend by so:

// import { DndProvider } from 'react-dnd';
// import { HTML5Backend } from 'react-dnd-html5-backend';

import { DndProvider } from 'react-dnd-multi-backend';
import HTML5toTouch from 'react-dnd-multi-backend/dist/esm/HTML5toTouch';

...

<DndProvider options={HTML5toTouch}>...</DndProvider>

and on compiling I get the following error:

/.../node_modules/react-dnd-multi-backend/dist/esm/HTML5toTouch.js:1
import { HTML5Backend } from 'react-dnd-html5-backend';
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Module._compile (/.../node_modules/source-map-support/source-map-support.js:547:25)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.nodeDevHook [as .js] (/.../node_modules/ts-node-dev/lib/hook.js:61:7)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at eval (webpack-internal:///react-dnd-multi-backend/dist/esm/HTML5toTouch:1:18)
    at Object.react-dnd-multi-backend/dist/esm/HTML5toTouch (/.../src/.next/server/static/development/pages/game.js:2209:1)
    at __webpack_require__ (/.../src/.next/server/static/development/pages/game.js:23:31)
    at eval (webpack-internal:///./modules/game/components/Game.tsx:6:103)
    at Module../modules/game/components/Game.tsx (/.../src/.next/server/static/development/pages/game.js:1519:1)
    at __webpack_require__ (/.../src/.next/server/static/development/pages/game.js:23:31)
    at eval (webpack-internal:///./modules/game/index.tsx:6:74)

Package versions:

"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3",
"react-dnd-multi-backend": "^6.0.2",
"react-dnd-touch-backend": "^11.1.3",

Node version local: 10.21.0
Node version in dev dependencies: "@types/node": "^14.0.1",

Project info:
made with Nextjs: ^9.4.1
react version: ^16.13.1

Typescript info:

"@typescript-eslint/eslint-plugin": "^2.34.0",
"@typescript-eslint/parser": "^2.34.0",
"eslint": "^7.0.0",
"ts-node-dev": "^1.0.0-pre.44",
"typescript": "^3.9.2"

Following the docs/examples..

import MultiBackend, { Preview } from 'react-dnd-multi-backend';

fails with "Cannot have two MultiBackends at the same time."

package.json

    "react": "^16.1.1",
    "react-dnd": "^2.5.4",
    "react-dnd-multi-backend": "^3.0.4",

Importing separately removes the error...

import MultiBackend from 'react-dnd-multi-backend';
import Preview from 'react-dnd-multi-backend/lib/Preview';

What is the problem

Currently dnd-multi-backend relies on outdated versions of dependencies

Additional info

warning " > [email protected]" has incorrect peer dependency "react@^16.13".
warning " > [email protected]" has incorrect peer dependency "react-dnd-html5-backend@^11.1.3".
warning " > [email protected]" has incorrect peer dependency "react-dnd-touch-backend@^11.1.3".
warning " > [email protected]" has incorrect peer dependency "react-dom@^16.13".

Solution

It'd be nice to see updated peer dependencies to include react@^17, react-dom@^17, react-dnd-html5-backend@^12 and react-dnd-touch-backend@^12

On "old" Android devices (<= 5.0 it seems), https://github.com/LouisBrunner/react-dnd-multi-backend/blob/master/src/lib/MultiBackend.js#L112 fails with a Type Error (Illegal constructor) exception.

Old browsers does not accept the modern syntax to create custom events. A workaround is provided on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#The_old-fashioned_way

It would be great to add this alternative syntax in a try block, as these versions are quite common for mobile users and this syntax can not be polyfilled. This will also help supporting IE users.

I can provide a PR for this, but I am not sure to understand what event.constructor(event.type, event) does here.

I have a few questions.
Using npm, how do I install all the dependencies of the multi backend?
Why am I being asked to install "react-dnd-touch-backend"?

The preview isn't displayed with react-dnd ^3.0.0 and react-dnd-multi-backend ^3.1.2 using the example provide in the repo.

Test repository: https://github.com/gnuletik/react-dnd-multi-backend-demo
Hosted demo: https://pensive-mcclintock-1ca257.netlify.com/

If you try to move an element with touch events, you realize that nothing is shown.
Did I miss something ?

Hello there.

I'm trying to build a react application with these dependencies:

"react-dnd-html5-backend": "10.0.2"
"react-dnd-multi-backend": "5.0.0"
"react-dnd-touch-backend": "10.0.2"

The build scripts throw this error:

Creating an optimized production build...
Failed to compile.

./node_modules/react-dnd-multi-backend/dist/esm/Preview.js
Attempted import error: 'PreviewManager' is not exported from 'dnd-multi-backend'.

I took a look at the dependency tree and react-dnd-multi-backend requires "dnd-multi-backend": "^5.0.0". Maybe the last version v5.0.2 introduces this issue? Thank you so much.

Hi,

I just updated my dependencies using yarn upgrade.
I have:

    "react-dnd": "^10.0.2",
    "react-dnd-html5-backend": "^10.0.2",
    "react-dnd-multi-backend": "^6.0.1",
    "react-dnd-touch-backend": "^10.0.2",

My application is broken: Error: You must specify a 'backend' property in your Backend entry
It is fixed after upgrading react-dnd to v11, however it may cause troubles to other people as it is a patch version on your side.

Preview doesn't seem to work if a backend is the first one in the pipeline.

I created a custom pipeline combining mouse backend and touch backend, both of which don't have a default preview:

import MouseBackend from 'react-dnd-mouse-backend';
import TouchBackend from 'react-dnd-touch-backend';
import { TouchTransition, MouseTransition } from 'react-dnd-multi-backend';

const MouseToTouch = {
    backends: [
        {
            backend: MouseBackend,
            preview: true,
            transition: MouseTransition
        },
        {
            backend: TouchBackend,
            options: {enableMouseEvents: true},
            preview: true,
            transition: TouchTransition
        },
    ]
};
export default MouseToTouch;

I implemented a preview and I can see preview on touch device, but cannot see with mouse devices. Interestingly, if I flip the order of the backends, then it's vice versa: preview shows up for mouse devices, but stops to show up for touch devices.

Could you check if it's a bug? Using hooks, context nor HOC doesn't seem to matter.

I get this error on the require statement:

TypeError: Super expression must either be null or a function, not undefined
    at _inherits (C:\Apps\workspace\betty.acdb.ui\node_modules\react-dnd-multi-backend\lib\Preview.js:26:113)
    at C:\Apps\workspace\betty.acdb.ui\node_modules\react-dnd-multi-backend\lib\Preview.js:33:3
    at Object.<anonymous> (C:\Apps\workspace\betty.acdb.ui\node_modules\react-dnd-multi-backend\lib\Preview.js:58:2)
    at Module._compile (module.js:435:26)

Touch preview is not working on the first try. But it working perfectly after. At first, I noticed the problem with my app. Later I noticed that the problem is also on your sample page. This problem happens on both my computer and my phone.

Screen recordings:

My app won't compile because it is looking for CommonJS versions of DnD modules.

Relevant dependencies

"dependencies": {
    "react": "^16.9.0",
    "react-dnd": "^9.4.0",
    "react-dnd-html5-backend": "^9.4.0",
    "react-dnd-multi-backend": "^4.0.0",
    "react-dnd-touch-backend": "^9.4.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "@types/react-dnd-multi-backend": "^4.0.0"
  }

Code

import { DndProvider } from 'react-dnd';
import MultiBackend from 'react-dnd-multi-backend';
import Html5toTouch from 'react-dnd-multi-backend/lib/HTML5toTouch';

<DndProvider backend={MultiBackend} options={Html5toTouch}>
// ...
</DndProvider>

Errors

./node_modules/react-dnd-preview/lib/index.js
Module not found: Can't resolve 'react-dnd-cjs' in '{...}/node_modules/react-dnd-preview/lib'

./node_modules/react-dnd-multi-backend/lib/HTML5toTouch.js
Module not found: Can't resolve 'react-dnd-html5-backend-cjs' in '{...}/node_modules/react-dnd-multi-backend/lib'

./node_modules/react-dnd-multi-backend/lib/HTML5toTouch.js
Module not found: Can't resolve 'react-dnd-touch-backend-cjs' in '{...}/node_modules/react-dnd-multi-backend/lib'

Hello, thx for this cool library!
I need to make a custom preview/drag-layer for both Touch and HTML5 backends.

I'm currently using this setup:

const HTML5toTouch = {
    backends: [
        {
            backend: HTML5Backend,
            preview: true,
            transition: HTML5DragTransition
        },
        {
            backend: TouchBackend({enableMouseEvents: false}),
            preview: true,
            transition: TouchTransition
        }
    ]
};

Problem
The title probably explains it but both the default drag layer and the generated drag layer is visible when dragging with a mouse.

Is that a bug or a feature and any ideas on how to not show the default drag layer? ^^

I have a component (react class) and would like it's DnD to be html5 and touch, I tried to follow the example I just can not get the touch preview to work (just fatals). I use the following in the main component render (to allow a touch preview?):

  <Preview generator={this.generatePreview} />

the class method generatePreview is currently (a la the example) and as such is agnostic

  generatePreview = (type, item, style) => (
    <div style={{ ...style, backgroundColor: item.color, width: '50px', height: '50px' }}>
      Generated
    </div>
  );

I get the following error:

this.props.generator is not a function

Stacktrace:

beginDrag {thing: Map}
cmp.js:52 {generator: ƒ, currentOffset: {…}, isDragging: true, itemType: "Thing", item: {…}, …}currentOffset: {x: 242.609375, y: 546}generator: ƒ generatePreview(type, item, style)isDragging: trueitem: {thing: Map}itemType: "Thing"ref: (...)get ref: ƒ ()__proto__: Object
Preview.js:53 Uncaught TypeError: this.props.generator is not a function

In the stacktrace the prop generator is clearly a function??

package.json

    "react": "^16.1.1",
    "react-dnd": "^2.5.4",
    "react-dnd-multi-backend": "^3.0.4",

I just can't seem to get this working, Thanks for any help!

Hello.

Switch HTML5Backend -> TouchBackend works great, but after that doesn't want to switch back to HTML5Backend.
Use :
const HTML5_TO_TOUCH_TO_HTML5 = {
backends: [
{
backend: HTML5Backend,
transition: HTML5DragTransition,
},
{
backend: TouchBackend({ enableMouseEvents: true }),
transition: TouchTransition,
}
]
};

See cormacrelf/angular-skyhook#484, especially:

https://github.com/react-dnd/react-dnd/blob/704245d47892f9d465b1b4465203f5c8464eb5a7/packages/core/html5-backend/src/index.ts#L7-L10

A dnd-core BackendFactory is just a function that returns any object that implements Backend. MultiBackend.js should not call it with new backend.backend(...). I am frankly surprised this hasn't caused errors before that issue was filed, maybe there is something weirder going on.

Hi there. I am struggling with using this with a custom preview component. But for some reason in my case after drag start the preview just gets dropped. Then I can pick it up and finish the drag.

dnd.mov.zip

Can you please post the examples in full too?

PureComponent, that is used in /src/lib/Preview.js, is appeared only in react 15.3.0 https://github.com/facebook/react/blob/master/CHANGELOG.md#1530-july-29-2016. So I believe you should add dependency to "react": "^15.3.0"

Currently the preview portals all use the same parent, which is a div added by the DndProvider.

However, if you are dragging something that is itself in a portal that is in a div that comes after that common parent, then the drag preview might be behind that other element.

It would be nice if instead of DndProvider creating its own div we could specify the div to use (e.g. document.getElementById('react-root')

The current workaround is to just make our own version of Preview and DndProvider that use the portal parent that we want to use.

Can you please update the peerDependencies to the latest react-dnd verison as version 10 is available?

I have the following references...

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="~/lib/ReactDnD.min.js"></script>
    <script src="~/lib/ReactDnDMultiBackend.min.js"></script>
    <script src="~/lib/RDMBHTML5toTouch.min.js"></script>

And then this code...

var root2 = <div />;

var AppDnD = ReactDnD.DragDropContext(ReactDnDMultiBackend.default(RDMBHTML5toTouch.default))(root2);

ReactDOM.render(root2, document.getElementById('content'));

This results in the following warning and error...

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of DragDropContext(Component).

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of DragDropContext(Component)

The null mentioned in the warning seems to be a result of the following generated code...

React.createElement(AppDnD, null)

Do you have any idea why I'm getting these issues?

Hello and thank you for your work. I use your lib on 5.0.0-rc03. React-dnd 9.4.0
My App.tsx file uses custom HTML5toTouch:

const HTML5toTouch = {
    backends: [
        {
            backend: HTML5Backend,
            transition: MouseTransition
        },
        {
            backend: TouchBackend,
            options: {enableMouseEvents: true},
            preview: true,
            transition: TouchTransition
        }
    ]
};

export class App extends Component {
  public render() {
    return (
      <DndProvider backend={MultiBackend} options={HTML5toTouch}>
        {.....}
      </DndProvider>
    );
  }
}

Where HTML5 backend is our fork of official one, and Touch backend is official. I get error attached on screen

When i go to node_modules and add new where the error suggests - my app works fine. So the question is: am I using your lib the wrong way or there needs to be new keyword?