Breaks Server-Side Rendering

Seems to affect both versions 5.x and 6.x. I have a decorator like this:

import { DragDropContext, DragLayer, DropTarget } from 'react-dnd'

export function DragAndDrop() {
  const context = DragDropContext(HTML5Backend)
  const layer = DragLayer((monitor) =>({ isDragging : monitor.isDragging() }))
  return component => context(layer(component))
}

The I decorate my app’s main component with @DragAndDrop(). This results in the .render() method returning null on server-side, and so server-side rendering returns emptyness. When I remove the @DragAndDrop() decorator everything renders as expected on server-side.

As a workaround, until the bug is fixed in this library, I modified my code this way:

import { DragDropContext, DragLayer, DropTarget } from 'react-dnd'

export function DragAndDrop() {
  if (typeof window === 'undefined') {
    return component => component
  }
  const context = DragDropContext(HTML5Backend)
  const layer = DragLayer((monitor) =>({ isDragging : monitor.isDragging() }))
  return component => context(layer(component))
}

[catamphetamine]

Why is there no “Reopen” button? This is not fixed.

[catamphetamine]

@dkarbayev Actually, my workaround doesn’t work (I guess yours too). It still renders but then throws a warning in React.hydrate(): “Did not expect server HTML to contain …”. (doesn’t seem to throw the warning when using react-dnd@5 so I’m staying at version 5 until it’s fixed, if it ever gets fixed) It’s weird though because the server and client markups are identical. Maybe a React bug even.

@darthtrevino Here is a sample repo illustrating the bug. https://github.com/catamphetamine/react-dnd-bug-showcase

npm install && npm start http://localhost:3000 Disable JavaScript in DevTools and see “Text” on the page. Then go to src/pages/DragAndDrop.js and comment the lines:

	// A workaround to prevent `react-dnd` from breaking server-side rendering.
	// https://github.com/react-dnd/react-dnd/issues/1192
	if (typeof window === 'undefined') {
		return component => component
	}

Ctrl + C and npm start. See that nothing renders. The workaround is still not the solution because it breaks React.hydrate().