search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.17k stars 2.53k forks source link

Dnd stop to working at Nextjs 13.5>, 13.4.18 is ok. #2537

Open Alan-Junqueira opened 11 months ago

Alan-Junqueira commented 11 months ago

The behavior happens only in development mode, I've make a project build and it works correctly, but in devepment mode, how can a test it? Is not a good dev experience. Should I on each change make a build to test it?

Expected behavior

When developing, and implementing react-beautiful-dnd, the expected behavior is drag and drop working correctly in development.

Actual behavior

However when implemented (Droppable and Draggable), it is not working correctly and the cursor that should be a draggable, becomes a pointer, and de Draggable item, becomes a clickable item, instead of draggable, and prints an error at console.

Steps to reproduce

Create any Nextjs project after 13.5>, with any react-beautifull-dnd template, run the project and try it. example: npx create-next-app@latest

What version of React are you using?

"react": "18.2.0",

What version of react-beautiful-dnd are you running?

"react-beautiful-dnd": "13.1.1",

What browser are you using?

I try it at Google Chrome and Microsoft Edge

Demo

webstorms commented 11 months ago

Stuck on the same issue

igmtink commented 11 months ago

just use this version @hello-pangea/dnd it is a react-beautiful-dnd that forked and developing

Alan-Junqueira commented 10 months ago

just use this version @hello-pangea/dnd it is a react-beautiful-dnd that forked and developing

Is @hello-pangea/dnd the same project, but yet with community suport?

I tried here, and work almost perfect.

I can drag and drop now in developmente mode, but the mouse, when I hover over a draggable item, are still as "cursor: pointer", and just after click, it change to the correct cursor.

guirip commented 10 months ago

react-beautiful-dnd doesn't work when React StrictMode is enabled.

If you are using just React, you might simply remove the <StrictMode> tags. If you are using Next.js, add reactStrictMode: false to next.js configuration.

devLuiss commented 9 months ago

it works when i disabled the strict mode on nextjs 14

josiaharkson commented 8 months ago

reactStrictMode thank you @guirip setting reactStrictMode to false in the next.config.js file fixed the issue for me!

amadich commented 6 months ago

The behavior happens only in development mode, I've make a project build and it works correctly, but in devepment mode, how can a test it? Is not a good dev experience. Should I on each change make a build to test it?

Expected behavior

When developing, and implementing react-beautiful-dnd, the expected behavior is drag and drop working correctly in development.

Actual behavior

However when implemented (Droppable and Draggable), it is not working correctly and the cursor that should be a draggable, becomes a pointer, and de Draggable item, becomes a clickable item, instead of draggable, and prints an error at console.

Steps to reproduce

Create any Nextjs project after 13.5>, with any react-beautifull-dnd template, run the project and try it. example: npx create-next-app@latest

What version of React are you using?

"react": "18.2.0",

What version of react-beautiful-dnd are you running?

"react-beautiful-dnd": "13.1.1",

What browser are you using?

I try it at Google Chrome and Microsoft Edge

Demo

image

pavan-singh-iphtech commented 2 months ago

it works when i disabled the strict mode on nextjs 14