How to fix `data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"' with react-beautiful-dnd and next.js

Question

When I try to use react-beautiful-dnd with next.js (or in general with server side rendering), after reorder items and refresh the page I get this error:

react-dom.development.js:88 Warning: Prop `data-rbd-draggable-context-id` did not match. Server: "1" Client: "0"

And this (that depends on the first one):

react-beautiful-dnd.esm.js:39 react-beautiful-dndA setup problem was encountered.> Invariant failed: Draggable[id: 1]: Unable to find drag handle

I try to use resetServerContext() to reset the server context counter, but it doesn't work as expected.

Answer 1

After some test i found a solution. Just call resetServerContext() server side.

As an example, in a next.js page just call it in getServerSideProps

import { GetServerSideProps } from "next";
import React from "react";
import { resetServerContext } from "react-beautiful-dnd";
import { DndWrapper } from "../../components/DndWrapper";


export default function App({ data }) {

    return <DragDropContext onDragEnd={onDragEnd}>...</DragDropContext>
}

export const getServerSideProps: GetServerSideProps = async ({ query }) => {

    resetServerContext()   // <-- CALL RESET SERVER CONTEXT, SERVER SIDE

    return {props: { data : []}}

}

Answer 2

Another solution:

const [isBrowser, setIsBrowser] = useState(false);

useEffect(() => {
  setIsBrowser(process.browser);
}, [])

function Home() {
  return(
   <>
    {isBrowser ? <DragDropContext> { /* all rbd code */ } </DragDropContext> : null}
   </>
  )
}

Answer 3

The accepted answer didn't work for me, but I found a working solution here:

import dynamic from 'next/dynamic';

const DragDropContext = dynamic(
  () =>
    import('react-beautiful-dnd').then(mod => {
      return mod.DragDropContext;
    }),
  {ssr: false},
);
const Droppable = dynamic(
  () =>
    import('react-beautiful-dnd').then(mod => {
      return mod.Droppable;
    }),
  {ssr: false},
);
const Draggable = dynamic(
  () =>
    import('react-beautiful-dnd').then(mod => {
      return mod.Draggable;
    }),
  {ssr: false},
);

This solution disables loading react-beautiful-dnd modules in the SSR mode.

Answer 4

I used this at the end of the nextjs page using b-dnd.

export async function getServerSideProps(context) {
  resetServerContext()   
  return {props: { data : []}}
}

and set this in next.config.js.

module.exports = {
  reactStrictMode: true,
};

This works but I don't fully understand the implications if I'm honest.

Answer 5

Check if you are using css-in-js libraries. I ran into a similar problem because of the following code in a nextjs page:

<Draggable
 key={task.id}
 draggableId={task.id}
 index={index}
>
      {(provided, snapshot) => {
        return (
          <div
           className={styles.card}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           ref={provided.innerRef}
           // style={{
           //   ...provided.draggableProps.styles,
           // }}
           // The abpve code is commented due to React Hydration Error
           // Link: https://nextjs.org/docs/messages/react-hydration-error
          >
             .
             .
             .                 
          </div>
      );
 }}
</Draggable>

Here is a link to the error details: https://nextjs.org/docs/messages/react-hydration-error