CODEWITHSUNDEEP
reactjsnpm
harsha ray
harsha ray

Reputation: 233

Unable to install react-beautiful-dnd package

*Below is the full error stack message while installing the package

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.5" from [email protected]
npm ERR! node_modules/react-beautiful-dnd
npm ERR!   react-beautiful-dnd@"^13.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Here is the complete code using the dragdropcontext and droppable from the package, the full component Main. Here is the complete code using the dragdropcontext and droppable from the package, the full component Main.

import { connect } from "react-redux"
import { DragDropContext, Droppable } from 'react-beautiful-dnd';


import SingleTask from "../SingleTask/SingleTask"

import "./Main.css"

const Main = (props) => {

    const [tasks, setTasks] = useState([])

    useEffect(() => {
        setTasks(...[props.tasks])
    },[props])


    return (
        <>
        <DragDropContext>
            <Droppable droppableId="Box1">
                {(provided) => (    
                    <div {...provided.droppableProps} ref={provided.innerRef}>
                        {provided.placeholder}
                        <div className="main-board">
                            <h2>FreeBoard</h2>

                            { tasks && tasks.map((task, index) => {
                                return (
                                    <div className="tasks-list" key={index}>
                                        <SingleTask taskName={task} indexCount={index}/>
                                    </div>
                                )
                            }) }
                        </div>
                    </div>
                )}
            </Droppable>
        </DragDropContext>
        </>
    )
}

const mapStateToProps = state => {
    return state
}

export default connect(mapStateToProps)(Main)

Upvotes: 3

Views: 3756

Answers (3)

Cale McCollough
Cale McCollough

Reputation: 360

As an alternative drop-in replacement for react-beautiful-dnd try hello pangea dnd

npm i @hello-pangea/dnd --save

Just replace the react-beautiful-dnd import line with:

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

Upvotes: 0

andiua
andiua

Reputation: 1

I had the same problem. Try to downgrate the react version. I changed from v18.1.0 to v17.0.2. It helps

Upvotes: 0

David Galoyan
David Galoyan

Reputation: 186

I think you have a cache problem because it is working perfectly on my machine, with no errors. Remove node_modules , update npm npm -g install npm and reinstall again everything.

Upvotes: 4

Related Questions