Registry /
web-framework / react-dnd-multi-backend
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
MultiBackend
✓ import MultiBackend from 'react-dnd-multi-backend';
✗ const MultiBackend = require('react-dnd-multi-backend');
The library transitioned to ESM-only builds in v8.0.0. CommonJS `require` statements will fail.
HTML5ToTouch
✓ import { HTML5ToTouch } from 'react-dnd-multi-backend';
✗ import HTML5ToTouch from 'react-dnd-multi-backend/lib/HTML5ToTouch';
Commonly used preset backend. Ensure you also install `react-dnd-html5-backend` and `react-dnd-touch-backend`.
DndProvider
✓ import { DndProvider } from 'react-dnd';
✗ import { DndProvider } from 'react-dnd-multi-backend';
While used with `MultiBackend`, `DndProvider` is exported from the core `react-dnd` package.
Demonstrates setting up `DndProvider` with `MultiBackend` and `HTML5ToTouch` for combined HTML5 and touch support.
import React from 'react';
import { DndProvider } from 'react-dnd';
import MultiBackend, { HTML5ToTouch } from 'react-dnd-multi-backend';
import { TouchBackend } from 'react-dnd-touch-backend';
import { HTML5Backend } from 'react-dnd-html5-backend';
interface MyDraggableProps {
name: string;
}
const MyDraggable: React.FC<MyDraggableProps> = ({ name }) => {
// In a real app, use useDrag hook here
return (
<div style={{ padding: '10px', margin: '5px', border: '1px solid gray' }}>
{name}
</div>
);
};
const App: React.FC = () => {
const options = {
backends: [
{ backend: HTML5Backend },
{ backend: TouchBackend, options: { enableMouseEvents: true } },
],
};
return (
<DndProvider backend={MultiBackend} options={options}>
<h1>Drag and Drop with Multi-Backend</h1>
<p>Try dragging these elements with mouse or touch.</p>
<MyDraggable name="Item 1" />
<MyDraggable name="Item 2" />
</DndProvider>
);
};
export default App;
Errors
Common errors & fixes
Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/react-dnd-multi-backend/dist/index.js from ... not supported.
Attempting to use `require()` to import `react-dnd-multi-backend` in a CommonJS environment after v8.0.0.
fixChange `const MultiBackend = require('react-dnd-multi-backend');` to `import MultiBackend from 'react-dnd-multi-backend';`. Ensure your project uses ES Modules or is properly transpiled. Module not found: Error: Can't resolve 'dnd-core'
Missing explicit `dnd-core` installation after v8.0.2 due to changes in dependency resolution.
fixInstall `dnd-core` as a direct dependency: `npm install dnd-core` or `yarn add dnd-core`.
Invalid hook call. Hooks can only be called inside of the body of a function component.
Often indicates multiple versions of React being loaded, or a mismatch in peer dependencies with `react-dnd` or `dnd-core`.
fixCheck for duplicate React installations (`npm ls react` or `yarn why react`). Ensure `react`, `react-dom`, `dnd-core`, and `react-dnd` peer dependencies are met and their versions are compatible.
TypeError: (0, react_dnd_multi_backend__WEBPACK_IMPORTED_MODULE_2__.HTML5ToTouch) is not a function
This usually happens if `HTML5ToTouch` is imported as a default export instead of a named export.
fixEnsure `HTML5ToTouch` is imported as a named export: `import { HTML5ToTouch } from 'react-dnd-multi-backend';` Audit
Dependencies
reactrequiredPeer dependency for React applications. Version 9.x requires React 16, 17, 18, or 19.
dnd-corerequiredPeer dependency for React DnD's core logic. Explicitly required in your project's dependencies since v8.0.2.
react-dndrequiredPeer dependency for the React DnD integration.
react-domrequiredPeer dependency for React DOM rendering. Version 9.x requires React DOM 16, 17, 18, or 19.
react-dnd-html5-backendoptionalRequired for HTML5 drag-and-drop functionality when using HTML5ToTouch or similar multi-backend configurations.
react-dnd-touch-backendoptionalRequired for touch-based drag-and-drop functionality when using HTML5ToTouch or similar multi-backend configurations.