Dragging not working using SSR after refresh #1854

tettoffensive · 2020-06-02T05:13:23Z

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.

#1775 (comment)

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)

The text was updated successfully, but these errors were encountered:

dhruvbhatia7 · 2020-06-16T00:13:30Z

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 · 2020-07-01T10:36:45Z

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

Can be easily reproduce with any sample codes.

Apparently linked to this #1883 . It can be used after npm run build but not when in hot reload environment

denieler · 2020-07-26T09:33:27Z

Guys, try to make this in _document.js:

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

vprtwn · 2020-08-02T21:57:22Z

Guys, try to make this in _document.js:


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

...

static getInitialProps({ renderPage }) {

    resetServerContext()

}

...

render () { ...

This worked for me

MacGyver98 · 2020-09-14T14:24:38Z

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 · 2020-09-14T16:45:31Z

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)

atlassian/react-beautiful-dnd#1854

dimitrisraptis96 · 2020-12-08T16:09:11Z

Another solution was to use the react-no-ssr library. Just wrap the whole DND component with <NoSSR>.

<NoSSR>
   ... // react-beautiful-dnd code inside
</NoSSR>

hopetambala · 2021-01-16T14:18:39Z

Another solution was to use the react-no-ssr library. Just wrap the whole DND component with <NoSSR>.
<NoSSR>
   ... // react-beautiful-dnd code inside
</NoSSR>

This worked! Thanks

lopezjurip · 2021-01-31T19:18:12Z

getInitialProps is deprecated, I would recommend using getServerSideProps to fix this issue.

Here is how to do it with Typescript:

import { GetServerSideProps } from "next";
import { resetServerContext } from "react-beautiful-dnd";

export const getServerSideProps: GetServerSideProps = async (context) => {
  resetServerContext();
  return { props: {} };
};

ivorpad · 2021-03-03T07:46:42Z

Another solution:

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

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

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

IKrehan · 2021-04-04T04:05:08Z

This worked for me:

medihack · 2021-05-21T06:42:22Z

@IKrehan solution is not really correct as resetServerContext should run on the server. But I guess it works on the client if you only use one DragDropContext. The problem is that with up-to-date Next.js (v10.2.x) it does not work anymore when resetServerContext is called in getInitialProps or getServerSideProps (react-dom.development.js:66 Warning: Prop data-rbd-draggable-context-id did not match. Server: "0" Client: "1"). I will investigate a bit further.

medihack · 2021-05-21T18:16:35Z

After some investigation and looking at the code it seems the root of the problem is more the client-side than the server-side. resetServerContext resets the context id correctly each time (that's why Server: "0" is logged). But in strict mode (I have it enabled as recommended by the Next.js team the client code is rendered twice. This is why the id ends up as 1 (Client: "1") instead of 0 (even I only have one DragDropContext. Can anyone confirm that React strict mode is enabled in his setup, too?

A possible workaround (just tested quickly) is to directly call resetServerContext in the render method of every page component which uses react-beautiful-dnd. That way the context id is reset on the server and client and always begins with 0. Not sure if there are any drawbacks.

uncvrd · 2021-07-07T06:22:28Z

The react-no-ssr component worked for me, but I would like to know why resetServerContext doesn't work as expected

trinhphuocbinh1993 · 2021-07-30T10:04:29Z

If you guys want to use react-beautiful-dnd with Next.js, this is my solution, i just make a component contain dnd not work with SSR of Next and it's work for me.

// your route (like dashboard/index.js)

import dynamic from 'next/dynamic';

const Your_Component_Name = dynamic(() => import('your_patch_of_component'), {
  ssr: false,
});

export default function App() {
 return (
   <Your_Component_Name />
)
}

I done my dnd followed by this tutorial: https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/

medihack · 2021-07-30T12:13:11Z

Also if you don't need HTML5 DND support then dnd-kit is a very good other solution with Next.js support I am quite happy with (very actively developed).

dhruvindsd-dev · 2021-07-30T12:23:07Z

If you guys want to use react-beautiful-dnd with Next.js, this is my solution, i just make a component contain dnd not work with SSR of Next and it's work for me.
// your route (like dashboard/index.js)

import dynamic from 'next/dynamic';

const Your_Component_Name = dynamic(() => import('your_patch_of_component'), {
  ssr: false,
});

export default function App() {
 return (
   <Your_Component_Name />
)
}
I done my dnd followed by this tutorial: https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/

This works perfectly, thanks for the solution.

sharva · 2021-10-03T03:44:58Z

If anyone still looking for SSR NextJS solution, following way of importing worked

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},
);

WaleedAmer · 2021-10-23T05:55:44Z

If anyone still looking for SSR NextJS solution, following way of importing worked

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},
);

Thanks so much, this worked for me instantly :)

gx2475 · 2021-10-30T03:19:35Z

Guys, try to make this in _document.js:

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

so do I create _document.js and then copy this code or what?

codelover2k · 2021-11-14T17:50:52Z

getInitialProps is obsolete and should not be used, use getServerSideProps instead.

resetServerContext() does not work in many cases.
There is still no official solution.

Would be great to have the SSR logic inside DragDropContext.

asenseofpradhyu · 2022-01-09T08:09:41Z

Any update on this ????

planktonrobo · 2022-02-06T00:06:38Z

If anyone still looking for SSR NextJS solution, following way of importing worked

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},
);

Thanks so much, this worked for me instantly :)

This worked well for me!

nirajpdn · 2022-04-27T12:31:07Z

If anyone still looking for SSR NextJS solution, following way of importing worked

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},
);

Thank you so much.

tettoffensive · 2022-04-27T18:47:33Z

If anyone still looking for SSR NextJS solution, following way of importing worked

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},
);

If anyone, like me, is using Typescript and getting errors with the above try this:

import dynamic from 'next/dynamic';

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

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

masterkain · 2023-04-20T23:42:29Z

somebody made it work with next13 + app directory? mixed server and client components with 'use client'; directive

shrix1 · 2023-06-16T11:44:01Z

What about Nextjs 13.4.4 + App Directory . Im having this Issue . please help

SemX74 · 2023-09-23T16:15:43Z

If anyone still looking for SSR NextJS solution, following way of importing worked

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},
);

thx!

tettoffensive added unconfirmed-bug untriaged labels Jun 2, 2020

rookbreezy mentioned this issue Jul 24, 2020

Does not work with React/Fast Refresh tajo/react-movable#47

Open

skqksh added a commit to skqksh/next-kanban that referenced this issue Nov 12, 2020

fix dev refresh error

2073359

atlassian/react-beautiful-dnd#1854

heyimalex mentioned this issue Mar 16, 2021

Invariant failed: Draggable[id: 2]: Unable to find drag handle on SSR, with Next JS #2092

Open

segunadebayo mentioned this issue May 14, 2021

[1.6.1] Chakra UI does not work well with react-beautiful-dnd on Next.js chakra-ui/chakra-ui#3979

Closed

medihack mentioned this issue May 21, 2021

Warning: Prop data-rbd-draggable-id did not match. Server: “A” Client: “B” (with resetServerContext() running) #2175

Open

nunocaseiro mentioned this issue Oct 25, 2021

feat: board details with drag and drop xgeekshq/split#30

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dragging not working using SSR after refresh #1854

Dragging not working using SSR after refresh #1854

tettoffensive commented Jun 2, 2020

dhruvbhatia7 commented Jun 16, 2020

daveteu commented Jul 1, 2020 •

edited

denieler commented Jul 26, 2020

vprtwn commented Aug 2, 2020

MacGyver98 commented Sep 14, 2020

MacGyver98 commented Sep 14, 2020 •

edited

dimitrisraptis96 commented Dec 8, 2020

hopetambala commented Jan 16, 2021

lopezjurip commented Jan 31, 2021

ivorpad commented Mar 3, 2021 •

edited

IKrehan commented Apr 4, 2021

medihack commented May 21, 2021 •

edited

medihack commented May 21, 2021 •

edited

uncvrd commented Jul 7, 2021

trinhphuocbinh1993 commented Jul 30, 2021 •

edited

medihack commented Jul 30, 2021

dhruvindsd-dev commented Jul 30, 2021

sharva commented Oct 3, 2021

WaleedAmer commented Oct 23, 2021

gx2475 commented Oct 30, 2021

codelover2k commented Nov 14, 2021 •

edited

asenseofpradhyu commented Jan 9, 2022

planktonrobo commented Feb 6, 2022

nirajpdn commented Apr 27, 2022

tettoffensive commented Apr 27, 2022

masterkain commented Apr 20, 2023

shrix1 commented Jun 16, 2023

SemX74 commented Sep 23, 2023

Dragging not working using SSR after refresh #1854

Dragging not working using SSR after refresh #1854

Comments

tettoffensive commented Jun 2, 2020

Expected behavior

Actual behavior

Steps to reproduce

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

What browser are you using?

dhruvbhatia7 commented Jun 16, 2020

daveteu commented Jul 1, 2020 • edited

denieler commented Jul 26, 2020

vprtwn commented Aug 2, 2020

MacGyver98 commented Sep 14, 2020

MacGyver98 commented Sep 14, 2020 • edited

dimitrisraptis96 commented Dec 8, 2020

hopetambala commented Jan 16, 2021

lopezjurip commented Jan 31, 2021

ivorpad commented Mar 3, 2021 • edited

IKrehan commented Apr 4, 2021

medihack commented May 21, 2021 • edited

medihack commented May 21, 2021 • edited

uncvrd commented Jul 7, 2021

trinhphuocbinh1993 commented Jul 30, 2021 • edited

medihack commented Jul 30, 2021

dhruvindsd-dev commented Jul 30, 2021

sharva commented Oct 3, 2021

WaleedAmer commented Oct 23, 2021

gx2475 commented Oct 30, 2021

codelover2k commented Nov 14, 2021 • edited

asenseofpradhyu commented Jan 9, 2022

planktonrobo commented Feb 6, 2022

nirajpdn commented Apr 27, 2022

tettoffensive commented Apr 27, 2022

masterkain commented Apr 20, 2023

shrix1 commented Jun 16, 2023

SemX74 commented Sep 23, 2023

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

daveteu commented Jul 1, 2020 •

edited

MacGyver98 commented Sep 14, 2020 •

edited

ivorpad commented Mar 3, 2021 •

edited

medihack commented May 21, 2021 •

edited

medihack commented May 21, 2021 •

edited

trinhphuocbinh1993 commented Jul 30, 2021 •

edited

codelover2k commented Nov 14, 2021 •

edited