`resetServerContext` not working (in Next.js)

pierreburel commented 2 years ago

Expected behavior

resetServerContext should prevent hydratation error in a SSR environment (see documentation)

Actual behavior

It throw hydratation errors (at least on Next.JS) while it was working with react-beautiful-dnd

Steps to reproduce

Create a simple sortable list with Droppable, Draggable and DragDropContext
Add resetServerContext() in Next.js’ custom Document
Look at the console:

Warning: Prop `aria-describedby` did not match. Server: "rfd-hidden-text-0-hidden-text-0" Client: "rfd-hidden-text-1-hidden-text-1"

and

@react-forked/dnd

Unable to find any drag handles in the context "1"

👷‍ This is a development only message. It will be removed in production builds.

@react-forked/dnd

A setup problem was encountered.

> Invariant failed: Draggable[id: item-1]: Unable to find drag handle

👷‍ This is a development only message. It will be removed in production builds.

What version of `React` are you using?

17.0.2

What version of `@react-forked/dnd` are you running?

14.0.2

What browser are you using?

Chrome 101.0.4951.64 and Firefox 100.0.2 on macOS 12.3.1

Demo

I created a simple test with original and forked libs, with both SSR and client-side-only implementations

react-beautiful-dnd (working): https://codesandbox.io/s/nextjs-react-beautiful-dnd-jfvitx?file=/pages/_document.js
@react-forked/dnd (not working): https://codesandbox.io/s/nextjs-react-forked-dnd-i9tlgl?file=/pages/_document.js

pierreburel commented 2 years ago

My bad it's working on my demo now 🤔 Sorry for that.

nirglow commented 2 years ago

Hey @pierreburel, I saw you used NoSsr in your code. Did you manage to get it to work with SSR enabled?

SamuelMS commented 2 years ago

Also seeing a similar issue – where resetServerContext is setting the id to 0 on the server each time (so it's reset), but the client has ID 1. This comment in the parent repo says it's a strict mode issue, but would still be nice to resolve.

subvertallchris commented 1 year ago

Sorry to come back on an old issue but this is still happening with Next.js 13 when using the app directory, which uses SSR automatically on client-side components. I've run into a couple other libraries that have this problem and the easy solution is to set an id. Perhaps setting the context ID value manually might be an easy workaround?

il3ven commented 1 year ago

@subvertallchris I was facing the same issue. As per my knowledge since @hello-pangea/dnd version 16.3.0 we don't need resetServerContext because it now uses React's useId. It turns out that the problem is with Next.js. Check out https://github.com/vercel/next.js/issues/53110. Updating to the latest canary version of Next.js solved the mismatch error that I was getting.

hello-pangea / dnd