search

atlassian / react-beautiful-dnd

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

Drag and Drop features not working in Next.js strict mode #2287

Open no-yan opened 3 years ago

no-yan commented 3 years ago

Expected behavior

In Next.js, Beautiful DND works regardless of whether it is strict mode or not.

nostrict

Actual behavior

When turning strict mode on by next.config.js, DND doesn't work.

strict

Error massage says:

Warning: Prop data-rbd-draggable-context-id did not match. Server: "0" Client: "1"

After seeing the error, I updated all the dependencies in package.json to latest, but this behavior remained the same. Next I converted Next.js base into Create React App base, I confirmed that this code works with CRA strict mode. Please note that resetServerContext is already used here. So now I suspect that resetServerContext may have a side effect.

Steps to reproduce

  1. git clone https://github.com/noyanyan/beautiful-dnd.git
  2. git checkout report
  3. yarn
  4. yarn dev
  5. after confirmed dnd not working, delete next.config.js.
  6. check cra branch to make sure DND works with CRA.

What version of React are you using?

React:17.0.2 React-dom: 17.0.2

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

13.1.0

What browser are you using?

chrome 92.0.4515.107

jedi2015 commented 3 years ago

Yes，i also confuse by that quesstion. When i used next.js start the code , console print some error log

Warning: Prop data-rbd-draggable-context-id did not match. Server: "1" Client: "0"

then pages drag component doesn't work.

But when i copy the same code into a 'create-react-app' project, it works well . I don't know how to solve this quession.