react-beautiful-dnd icon indicating copy to clipboard operation
react-beautiful-dnd copied to clipboard

Doesent work on nextjs 14

Open devLuiss opened this issue 2 years ago • 3 comments

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,

devLuiss avatar Nov 28 '23 13:11 devLuiss

Known issue: https://github.com/atlassian/react-beautiful-dnd/issues/2407

dnikomon avatar Nov 30 '23 11:11 dnikomon

@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>

plvo avatar Dec 05 '23 15:12 plvo

image

i have same issue it happen when i'm upgrade nextjs version from 13 to 14

panduseptian avatar Dec 06 '23 07:12 panduseptian