React-beautiful-dnd: Dragging not working using SSR after refresh

[tettoffensive]

I'm experiencing the issues mentioned in this issue. For some reason, it was closed, even though the issue isn't resolved. However, unlike the reporter in this issue, I am using the suggested _document.js API.

https://github.com/atlassian/react-beautiful-dnd/issues/1775#issuecomment-636077095

Expected behavior

react-beautiful-dnd should run without warnings and errors when using SSR with next.js production AND dev. I should be able to always pick up draggable items.

Actual behavior

Receiving the following errors when trying to run react-beautiful-dnd with next.js:

react-beautiful-dnd

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

👷‍ This is a development only message. It will be removed in production builds. react-beautiful-dnd.esm.js:39
react-beautiful-dnd

A setup problem was encountered.

Invariant failed: Draggable[id: id-0}]: Unable to find drag handle

👷‍ This is a development only message. It will be removed in production builds. react-beautiful-dnd.esm.js:39
react-beautiful-dnd

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

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

Which according to other issues should resolve the problem with the client, server id mismatches when using SSR.
But it's not resolved for me sadly.

The issue appears to be most reproduceable, by refreshing the page after initial load in development mode.

Steps to reproduce

Install the next.js, react-beautiful-react-dnd
Follow this tutorial: https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd

In this tutorial the attribute innerRef is being used. Don't use it. Instead use the ref attribute!

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

I'm using the following dependencies (listed in my package.json file):

"react": "^16.13.1",
"react-beautiful-dnd": "^13.0.0",
Next.js v9.4.0

What browser are you using?

Chrome Version 83.0.4103.61 (Official Build) (64-bit)
Firefox 76.0.1 (64-bit)

[dhruvbhatia7]

I'm facing this exact issue. I'm also using nextjs and SSR

react-beautiful-dndA setup problem was encountered.> Invariant failed: Draggable[id: ostKJgjkAzaeOBWowkz9]: Unable to find drag handle👷‍ This is a development only message. It will be removed in production builds. at Draggable (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:92012:65) at ConnectFunction (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:108095:75) at PrivateDraggable (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:92364:26) at PublicDraggable (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:92374:32) at div at Droppable (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:92386:76) at ConnectFunction (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:108095:75) at Provider (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:107808:20) at App (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:90983:25) at ErrorBoundary (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:84248:35) at DragDropContext (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:91112:19) at div at div at http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:95916:23 at div at div at http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:93645:23 at div at http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:94302:23 at div at http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:98297:23 at div at TasksInfo (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:1040:80) at div at div at http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:94302:23 at div at http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:98297:23 at div at http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:94525:23 at div at Dashboard (http://localhost:3000/_next/static/development/pages/dashboard.js?ts=1592266231892:112708:22) at MyApp (http://localhost:3000/_next/static/development/pages/_app.js?ts=1592266231892:4225:24) at Container (http://localhost:3000/_next/static/runtime/main.js?ts=1592266231892:2829:5) at AppContainer (http://localhost:3000/_next/static/runtime/main.js?ts=1592266231892:3245:24)

[daveteu]

also using nextJS facing this. but I did not use SSR

Can be easily reproduce with any sample codes.

Apparently linked to this https://github.com/atlassian/react-beautiful-dnd/issues/1883 . It can be used after npm run build but not when in hot reload environment

[denieler]

Guys, try to make this in _document.js:

import { resetServerContext } from 'react-beautiful-dnd'
...
static getInitialProps({ renderPage }) {
    resetServerContext()
}
...
render () { ...

[benzguo]

Guys, try to make this in _document.js:

import { resetServerContext } from 'react-beautiful-dnd'

...

static getInitialProps({ renderPage }) {

    resetServerContext()

}

...

render () { ...

This worked for me

[MacGyver98]

Guys, try to make this in _document.js:

import { resetServerContext } from 'react-beautiful-dnd'
...
static getInitialProps({ renderPage }) {
    resetServerContext()
}
...
render () { ...

Something change, now the bug is another...

May be do you have any clue?

[MacGyver98]

Guys, try to make this in _document.js:

import { resetServerContext } from 'react-beautiful-dnd'
...
static getInitialProps({ renderPage }) {
    resetServerContext()
}
...
render () { ...

Sorry, my mistake. It works !!! I was using Draggable in wrong way... Gracias compadre! (as we say in my country)