react-beautiful-dnd
react-beautiful-dnd copied to clipboard
Doesent work on nextjs 14
doesn't work on nextjs 14, there seems to be incompatibility with the latest versions of nextjs/react/node, buuut only works when i set
reactStrictMode: false,
Known issue: https://github.com/atlassian/react-beautiful-dnd/issues/2407
@devLuiss what is your error message? it works for me.
package.json:
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.17",
"formidable": "^3.5.1",
"imagekit": "^4.1.4",
"mongodb": "^6.2.0",
"next": "^14.0.2",
"next-auth": "^4.24.5",
"react": "^18",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^18",
"react-scroll": "^1.9.0",
"react-toastify": "^9.1.3",
"tailwindcss-animated": "^1.0.1"
},
"devDependencies": {
"@types/react": "18.2.31",
"@types/react-beautiful-dnd": "^13.1.7",
"autoprefixer": "^10",
"daisyui": "^4.4.2",
"eslint": "^8",
"eslint-config-next": "13.5.6",
"postcss": "^8",
"tailwindcss": "^3"
}
a component example:
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={menuData._id}>
{(provided, snapshot) => (
<div
key={menuData._id}
{...provided.droppableProps}
ref={provided.innerRef}
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 border"
>
....
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
i have same issue it happen when i'm upgrade nextjs version from 13 to 14