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.
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 : []}}
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With