{"id":15180,"library":"react-dnd-multi-backend","title":"React DnD Multi-Backend","description":"This library provides a multi-backend system compatible with React DnD, enabling applications to seamlessly switch between different drag-and-drop backends, such as HTML5 and Touch. It is currently at version 9.0.0, maintaining an active release cadence that often aligns with major React and `dnd-core` updates. A key differentiator is its ability to allow a single `DndProvider` to manage multiple backends simultaneously, simplifying the implementation of responsive drag-and-drop interfaces that need to work across various input methods (e.g., mouse for desktop, touch for mobile). The library facilitates a robust and flexible approach to handling diverse drag-and-drop interactions within React applications without extensive manual switching logic.","status":"active","version":"9.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/LouisBrunner/dnd-multi-backend","tags":["javascript","react","dnd","drag","drop","html5","touch","react-dnd","typescript"],"install":[{"cmd":"npm install react-dnd-multi-backend","lang":"bash","label":"npm"},{"cmd":"yarn add react-dnd-multi-backend","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-dnd-multi-backend","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications. Version 9.x requires React 16, 17, 18, or 19.","package":"react","optional":false},{"reason":"Peer dependency for React DnD's core logic. Explicitly required in your project's dependencies since v8.0.2.","package":"dnd-core","optional":false},{"reason":"Peer dependency for the React DnD integration.","package":"react-dnd","optional":false},{"reason":"Peer dependency for React DOM rendering. Version 9.x requires React DOM 16, 17, 18, or 19.","package":"react-dom","optional":false},{"reason":"Required for HTML5 drag-and-drop functionality when using HTML5ToTouch or similar multi-backend configurations.","package":"react-dnd-html5-backend","optional":true},{"reason":"Required for touch-based drag-and-drop functionality when using HTML5ToTouch or similar multi-backend configurations.","package":"react-dnd-touch-backend","optional":true}],"imports":[{"note":"The library transitioned to ESM-only builds in v8.0.0. CommonJS `require` statements will fail.","wrong":"const MultiBackend = require('react-dnd-multi-backend');","symbol":"MultiBackend","correct":"import MultiBackend from 'react-dnd-multi-backend';"},{"note":"Commonly used preset backend. Ensure you also install `react-dnd-html5-backend` and `react-dnd-touch-backend`.","wrong":"import HTML5ToTouch from 'react-dnd-multi-backend/lib/HTML5ToTouch';","symbol":"HTML5ToTouch","correct":"import { HTML5ToTouch } from 'react-dnd-multi-backend';"},{"note":"While used with `MultiBackend`, `DndProvider` is exported from the core `react-dnd` package.","wrong":"import { DndProvider } from 'react-dnd-multi-backend';","symbol":"DndProvider","correct":"import { DndProvider } from 'react-dnd';"}],"quickstart":{"code":"import React from 'react';\nimport { DndProvider } from 'react-dnd';\nimport MultiBackend, { HTML5ToTouch } from 'react-dnd-multi-backend';\nimport { TouchBackend } from 'react-dnd-touch-backend';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\n\ninterface MyDraggableProps {\n name: string;\n}\n\nconst MyDraggable: React.FC = ({ name }) => {\n // In a real app, use useDrag hook here\n return (\n
\n {name}\n
\n );\n};\n\nconst App: React.FC = () => {\n const options = {\n backends: [\n { backend: HTML5Backend },\n { backend: TouchBackend, options: { enableMouseEvents: true } },\n ],\n };\n\n return (\n \n

Drag and Drop with Multi-Backend

\n

Try dragging these elements with mouse or touch.

\n \n \n \n );\n};\n\nexport default App;\n","lang":"typescript","description":"Demonstrates setting up `DndProvider` with `MultiBackend` and `HTML5ToTouch` for combined HTML5 and touch support."},"warnings":[{"fix":"Update your project to use ES Modules (e.g., `import` syntax). If using Node.js, ensure your project is configured for ESM or use a bundler that transpiles ESM for older environments.","message":"Version 8.0.0 dropped support for CommonJS and UMD builds. The library is now ESM-only.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Upgrade your Node.js environment to a supported version (e.g., Node.js 16 or higher).","message":"Version 8.0.0 dropped support for Node.js 14. Projects requiring Node 14 will need to remain on a prior major version.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Run `npm install dnd-core` or `yarn add dnd-core` in your project.","message":"Since version 8.0.2, `dnd-core` might need to be explicitly added to your project's `dependencies` field, even though it's a peer dependency.","severity":"gotcha","affected_versions":">=8.0.2"},{"fix":"Ensure your project's `react` and `react-dom` versions satisfy the peer dependency requirements of `^16.14.0 || ^17.0.2 || ^18.0.0 || ^19.0.0`.","message":"Version 9.0.0 added support for React v19, which required updating the `react` and `react-dom` peer dependencies. While no direct API changes in `react-dnd-multi-backend` were introduced, this is a breaking change for projects not yet ready for React 19.","severity":"breaking","affected_versions":">=9.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Change `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.","cause":"Attempting to use `require()` to import `react-dnd-multi-backend` in a CommonJS environment after v8.0.0.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/react-dnd-multi-backend/dist/index.js from ... not supported."},{"fix":"Install `dnd-core` as a direct dependency: `npm install dnd-core` or `yarn add dnd-core`.","cause":"Missing explicit `dnd-core` installation after v8.0.2 due to changes in dependency resolution.","error":"Module not found: Error: Can't resolve 'dnd-core'"},{"fix":"Check 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.","cause":"Often indicates multiple versions of React being loaded, or a mismatch in peer dependencies with `react-dnd` or `dnd-core`.","error":"Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Ensure `HTML5ToTouch` is imported as a named export: `import { HTML5ToTouch } from 'react-dnd-multi-backend';`","cause":"This usually happens if `HTML5ToTouch` is imported as a default export instead of a named export.","error":"TypeError: (0, react_dnd_multi_backend__WEBPACK_IMPORTED_MODULE_2__.HTML5ToTouch) is not a function"}],"ecosystem":"npm"}