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

[Alan Junqueira]

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]

Stuck on the same issue

[igmtink]

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

[Alan Junqueira]

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]

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.

[Luis henrique pavão]

it works when i disabled the strict mode on nextjs 14

[Josiah Arkson]

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

[Mohamed Jeridi]

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

• You can Use @hello-pangea/dnd
• Worked for me in NextJs 14