React-beautiful-dnd: Draggables unable to be dragged nor clicked

[rush-levint]

Hi, I couldn't get server side rendering to work with Next.js using custom _document.js and then via resetServerContext() (inserted at line 6) as mentioned in the docs.

It still display mismatches on the browser console.

Am I missing something?

[alexreardon]

That should be all that is required. Can you please post a stand alone
example for us to poke around with? Ideally on codesandbox.io

Cheers

On Thu, 12 Apr 2018 at 15:37 Levin Tacandong [e-mail]
wrote:

Hi, I couldn't get server side rendering to work with Next.js using
custom _document.js
https://github.com/zeit/next.js/blob/9ec81c00fad040154df571701b73cb6e3b1b86fa/examples/with-styled-components/pages/_document.js
and then via resetServerContext() as mentioned in the docs.

It still display mismatches on the browser console.

Am I missing something?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/436, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ACFN7TgUyAeBTFSgr-f1z_7LUWwjuDGBks5tnugfgaJpZM4TRK2D
.

[rush-levint]

My bad, it turns out that it's working. The error was from a different source.

Though my draggables aren't able to be dragged nor receiving the onClick event. Here's the code snippet below. (I also tried replicating the code with create-react-app but still same behavior)

class FieldsPanel extends Component {
  handleClickField = field => {
    this.props.onClickField(field);
  };

  render() {
    return (
      <Droppable droppableId="fields" isDropDisabled>
        {dropProvided => (
          <Root ref={dropProvided.innerRef} {...dropProvided.droppableProps}>
            {types.fields.map((field, index) => (
              <Draggable
                draggableId={field}
                index={index}
                key={field}
                onClick={() => {
                  this.handleClickField(field);
                }}
              >
                {dragProvided => (
                  <FieldBlock
                    ref={dragProvided.innerRef}
                    type={field}
                    {...dragProvided.draggableProps}
                    {...dragProvided.dragHandleProps}
                  />
                )}
              </Draggable>
            ))}
            {dropProvided.placeholder}
          </Root>
        )}
      </Droppable>
    );
  }
}

export default FieldsPanel;

*the DragDropContext is on a parent container

React => 16.3.0
with styled-components

[nodabladam]

For those searching how exactly to get Next.js working, this was my _document.js attempt:

  static async getInitialProps(ctx) {
    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: App => props => {
          resetServerContext();
          return <App {...props} />;
        }
      });
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

[eddyw]

@nodabladam you don't need to overwrite renderPage. This should be enough for NextJS:

CustomDocument.getInitialProps = async (ctx) => {
  resetServerContext() // <<
  return Document.getInitialProps(ctx)
}

For a little bit more complex example, this is what I had with NextJS + React-JSS + TS:

CustomDocument.getInitialProps = async (ctx: DocumentContext) => {
  resetServerContext() // <<

  const sheets = new ServerStyleSheets()
  const originalRenderPage = ctx.renderPage

  ctx.renderPage = () => {
    return originalRenderPage({
      enhanceApp : App => props => sheets.collect(<App {...props} />),
    })
  }

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  }
}

Edit: so, the above works because resetServerContext doesn't need to necessarily happen within DragDropContext. The only thing it does is reset a variable:
https://github.com/atlassian/react-beautiful-dnd/blob/c8c86601b3666b8236ff46d56daeedaf9c41e566/src/view/drag-drop-context/drag-drop-context.jsx#L23-L28