\n {text}\n \n );\n};\n\nconst Container: React.FC = () => {\n const [cards, setCards] = React.useState([\n { id: 1, text: 'Write a cool JS library' },\n { id: 2, text: 'Make it generic enough' },\n { id: 3, text: 'Write some docs' },\n { id: 4, text: 'Profit' }\n ]);\n\n const moveCard = React.useCallback((id: number, to: number) => {\n const dragIndex = cards.findIndex(card => card.id === id);\n const dragCard = cards[dragIndex];\n const newCards = [...cards];\n newCards.splice(dragIndex, 1);\n newCards.splice(to, 0, dragCard);\n setCards(newCards);\n }, [cards]);\n\n return (\n \n {cards.map((card, i) => (\n \n ))}\n
\n );\n};\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n","lang":"typescript","description":"This quickstart demonstrates a basic sortable list using React DnD with the HTML5 Backend, showcasing DndProvider, useDrag, and useDrop hooks to enable drag-and-drop reordering of cards."},"warnings":[{"fix":"Update import statements from `const MyComponent = require('pkg')` to `import { MyComponent } from 'pkg'` and ensure your build setup (e.g., webpack, Rollup, Node.js environment) supports ES Modules.","message":"The package transitioned to ESM-only modules starting with v16.0.0. This means CommonJS 'require()' statements will no longer work, requiring projects to adopt ES Modules for imports or use a bundler that handles ESM correctly.","severity":"breaking","affected_versions":">=16.0.0"},{"fix":"Refactor components to utilize React Hooks (`useDrag`, `useDrop`, `useMonitor`) for drag-and-drop functionality instead of class decorators. Refer to the official React DnD documentation for Hooks API examples.","message":"The Decorators API was completely removed in v15.0.0 and replaced by the Hooks API. Existing components using decorators (e.g., @DragSource, @DropTarget) must be refactored to use `useDrag` and `useDrop` hooks.","severity":"breaking","affected_versions":">=15.0.0"},{"fix":"Remove any `begin` method from your `useDrag` hook specifications. The `item` and `collect` functions should encapsulate the necessary logic.","message":"Attempting to specify a `begin` method within the `useDrag::spec` configuration will throw a developer exception. This method is intentionally disallowed in the Hooks API.","severity":"gotcha","affected_versions":">=14.0.2"},{"fix":"Upgrade to `react-dnd-html5-backend@14.0.3` or newer to benefit from fixes related to iframe and child window interactions.","message":"Earlier versions had issues with drag-and-drop operations within iframes or child windows. While a fix was introduced in v14.0.3, ensure you are on a recent version if encountering such problems.","severity":"gotcha","affected_versions":"<14.0.3"},{"fix":"Avoid `v15.0.0`. If targeting v15, use `v15.0.1` or newer for dual CJS/ESM support, or upgrade to `v16.0.0+` and fully embrace ESM.","message":"v15.0.0 was initially published as ESM-only, but quickly reverted in v15.0.1 due to issues, temporarily restoring CommonJS/ESM format. The permanent transition to ESM-only occurred in v16.0.0. This history can cause confusion if relying on specific minor versions.","severity":"gotcha","affected_versions":"15.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `const HTML5Backend = require('react-dnd-html5-backend');` to `import { HTML5Backend } from 'react-dnd-html5-backend';`.","cause":"Attempting to use CommonJS 'require()' to import the package in an ESM context (Node.js module with `\"type\": \"module\"` or modern bundler config).","error":"ReferenceError: require is not defined"},{"fix":"Ensure `DndProvider` is correctly imported from 'react-dnd' and passed a valid backend, e.g., `...`.","cause":"Incorrect import or configuration of the DndProvider from 'react-dnd', or the 'backend' prop is missing/invalid.","error":"TypeError: (0 , react_dnd__WEBPACK_IMPORTED_MODULE_1__.DndProvider) is not a function"},{"fix":"Convert your class component to a functional component and use the `useDrag` and `useDrop` hooks. Alternatively, if you need class components, use an older `react-dnd` version that supports decorators (pre-v15.0.0).","cause":"Trying to use React Hooks (like `useDrag` or `useDrop`) inside a class component after the Decorators API was removed.","error":"TypeError: 'useDrag' cannot be called inside a class component."},{"fix":"Run `npm install react-dnd-html5-backend react-dnd` or `yarn add react-dnd-html5-backend react-dnd` and double-check the import statement for correct spelling.","cause":"The package is not installed, or there's a typo in the import path.","error":"Module not found: Can't resolve 'react-dnd-html5-backend'"}],"ecosystem":"npm"}