7

I am trying to include beautiful dnd package in my project but i got error while installing the package.enter image description here

Please tell me if there is any other package like it or the solution of this error.

Mishra Vaibhav
  • 216
  • 3
  • 11

3 Answers3

12

You can try installing @hello-pangea/dnd from here with the following command:

npm i @hello-pangea/dnd

Later on, pretty much everything else is the same, you only change your imports from:

import { DragDropContext } from 'react-beautiful-dnd';

to

import { DragDropContext } from '@hello-pangea/dnd';

Their NPM page:

https://www.npmjs.com/package/@hello-pangea/dnd

And their Github Repo:

https://github.com/hello-pangea/dnd

Miguel Jara
  • 311
  • 2
  • 9
0

You can try installing with --legacy-peer-deps as suggested here

LHY
  • 39
  • 4
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 29 '22 at 04:07
-1

Thanks, Replacing 'react-beautiful-dnd' with hellopangea worked for me. I am using React with TypeScript, using Vite. HelloPangea already has built in support for TypeScript. Although there is a warning that pops up in browser console, but the app runs fine. Will update the answer if faced any other issues. Cheers!

@hello-pangea/dndDroppable setup issue [droppableId:"TodosRemove"]:DroppableProvided > placeholder could not be found.Please be sure to add the {provided.placeholder} React Node as a child of your Droppable.More information: https://github.com/hello-pangea/dnd/blob/main/docs/api/droppable.md

Harsh Srivastav
  • 1
  • 2
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 22 '23 at 00:47