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

[aliburhankeskin]

On every click and every page refresh , output console

_document.js

import { ServerStyleSheets } from '@material-ui/core/styles'; import { resetServerContext } from 'react-beautiful-dnd';

`

  MyDocument.getInitialProps = async (ctx) => {
      const sheets = new ServerStyleSheets();
      const originalRenderPage = ctx.renderPage;
      ctx.renderPage = () => originalRenderPage({
        enhanceApp: (App) => (props) => {
          resetServerContext();
          return sheets.collect(<App {...props} />);
        },
      });

` Can you please fix this error.

[mtahagocer]

I'm also getting faceing this issue. Any recommentation?

[ivorpad]

I'm facing the exact same issue even after calling resetServerContext() correctly.

//__document.js
import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
import { resetServerContext } from "react-beautiful-dnd";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
        
      resetServerContext();
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

// _app.js
import '../styles/globals.css'
import { ChakraProvider } from "@chakra-ui/react";
import { DragDropContext, resetServerContext } from "react-beautiful-dnd";

export default function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export const getServerSideProps = async ({ query }) => {
    resetServerContext();
    return {props: { data : []}}
}

[heyimalex]

I'm facing the same issue using v13, but without using SSR. Trying to create a minimal repro on codesandbox but no luck yet.

[heyimalex]

dupe of #1854

[pjtf93]

Any luck so far with this? I haven't been able to get this to work with Nextjs and Chakra-ui

[ivorpad]

@pjtf93 I solved it by returning the DragDropContext only if process.browser is true.

{ process.browser ? <DragDropContext onDragEnd={onDragEnd}> ... </DragDropContext> : null }

[medihack]

Only rendering it in the browser is IMHO an ugly workaround. We should fix react-beautiful-dnd for supporting SSR on latest Next.js. It is just a matter of providing the correct IDs. Maybe there should be a way to optionally set them manually instead of auto generating them.

[ivorpad]

@medihack Is not ugly if you don't care about the DnD being SSR'd. What's wrong with it?

[medihack]

@ivorpad In my opinion SSR should work fully as it is officially supported by this library (and I guess it is not very difficult to fix). But I am happy that your solution works for you.

[saurabhburade]

Solved

• Note : I used NextJS for React I was getting the same error in development and production as well.

It occurs because DOM and window is not loaded before that our component gets loaded.

Here's a solution :

• Make Sure your window object is ready before your component loads up.
• Here's code that I have implemented

import dynamic from "next/dynamic";
const Column = dynamic(import("./Column/Column"));
function ScrumBoard() {
    const [winReady, setwinReady] = useState(false);
    useEffect(() => {
        setwinReady(true);
    }, []);
    return (
        <div className="pl-4 pr-4 pt-3">
           ` <h5>Frontend Board</h5>`
            {winReady ? <Column /> : null}
        </div>
    );
}
export default ScrumBoard;

[1-Felix]

@saurabhburade Unfortunately, with your method you lose again the SSR advantages

[mactanner]

resetServerContext(); seems to work if reactStrictMode is disabled in next.config.js. But that's not really a solution.

[mustaphatg]

The { ...provided.dragHandleProps} is missing from the draggable component.

I haven't found any tutorial that includes it.

After days of debugging I found this source code on Github

I know something is wrong, some people includes it, some do not and it works as expected.

I will like to learn more about this.