Problem with SSR and Drag and Drop Library

[A11yship]

Hello,
use the @hello-pangea/dnd library to add Drag and Drop functionality to my app.
Now I Have problems with the reset of the ServerSideRendering. They provide a function to reset the context on the server. I try to use the function but I'm not sure if it's called at the right place.
I got the following errors:

Warning: Prop `data-rfd-draggable-id` did not match. Server: "D_CuVaNiYip0mBu_JFDQl" Client: "eck1C_PAnRAtYE1BCCTXp"
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19811
Draggable@webpack-internal:///./node_modules/@hello-pangea/dnd/dist/dnd.esm.js:7127:60
ConnectFunction@webpack-internal:///./node_modules/react-redux/es/components/connect.js:240:114
PrivateDraggable@webpack-internal:///./node_modules/@hello-pangea/dnd/dist/dnd.esm.js:7497:46
PublicDraggable@webpack-internal:///./node_modules/@hello-pangea/dnd/dist/dnd.esm.js:7507:21
Task@webpack-internal:///./src/components/Task/Task.js:24:7
div
Droppable@webpack-internal:///./node_modules/@hello-pangea/dnd/dist/dnd.esm.js:8214:71
ConnectFunction@webpack-internal:///./node_modules/react-redux/es/components/connect.js:240:114
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19811
Column@webpack-internal:///./src/components/Column/Column.js:26:7
Provider@webpack-internal:///./node_modules/react-redux/es/components/Provider.js:12:18
App@webpack-internal:///./node_modules/@hello-pangea/dnd/dist/dnd.esm.js:6793:7
ErrorBoundary@webpack-internal:///./node_modules/@hello-pangea/dnd/dist/dnd.esm.js:107:5
DragDropContext@webpack-internal:///./node_modules/@hello-pangea/dnd/dist/dnd.esm.js:6912:21
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19811
CreateList@webpack-internal:///./src/pages/create-list.js:27:76
App@webpack-internal:///./src/pages/_app.js:23:7
ErrorBoundary@webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20740
ReactDevOverlay@webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23545
Container@webpack-internal:///./node_modules/next/dist/client/index.js:82:1
AppContainer@webpack-internal:///./node_modules/next/dist/client/index.js:539:7
Root@webpack-internal:///./node_modules/next/dist/client/index.js:687:7 

See more info here: https://nextjs.org/docs/messages/react-hydration-error

and:

@hello-pangea/dnd

A setup problem was encountered.

> Invariant failed: Draggable[id: eck1C_PAnRAtYE1BCCTXp]: Unable to find drag handle

At the moment the call is in the _document.js. I also tried it in getServerSideProps in the creat-list.js but both Ideas doesn't work. You can find my current branch on github and a deployment on vercel. The errors don't occur in the vercel deployment.
Thanks for your help.

[alexclaes]

Okay, that seems to be a hard one.

Everything your did is according to the documentation and solutions I could find. Unfortunately, somehow it doesn't work :-/

There are open issues regarding this topic with react-beautiful-dnd:
atlassian/react-beautiful-dnd#1854
atlassian/react-beautiful-dnd#2175

One comment suggests it might be a conflict with react strict mode. My experience with this library und my quick testing doesn't confirm this idea.
atlassian/react-beautiful-dnd#1854 (comment)

The common solution seems to be, that components using dnd should be rendered on the client only, not the server.

There are different approaches to this, but an easy solution with Next.js are dynamic imports with the ssr: false option.

https://nextjs.org/docs/advanced-features/dynamic-import

const DragList = dynamic(() => import('../components/DragList'), {
  ssr: false,
})

export default function CreateList() {
  return (
    <>
        <h1>Wähle aktuelle Aufgaben </h1>
        <StyledContainer>
          <DragList />
        </StyledContainer>
    </>
  )

export default function DragList() {
  // [...] useStore, useState, etc.

  return (
    <DragDropContext onDragEnd={handleOnDragEnd}>
      {columns.map(column => /* [...] */)}
    </DragDropContext>
  )
}