Material-table: SSR server/client mismatch error, related to react-beautiful-dnd dependency

[kyle-mccarthy]

Describe the bug

react-beautiful-dnd exports resetServerContext that allows for it to be used with SSR. The function clears the server context which resolves errors like:

"Warning: Prop data-react-beautiful-dnd-draggable did not match. Server: "7" Client: "0"

material-table includes react-beautiful-dnd as a dependency, but does not export the resetServerContext. If a project includes material-table and also includes react-beautiful-dnd, but the _versions do not match_ calling the function resetServerContext imported from react-beautiful-dnd does not reset the context on the module instance used by material-table.

To Reproduce
Steps to reproduce the behavior:

1. Clone repo: https://github.com/kyle-mccarthy/react-material-table-ssr-issue
2. yarn install
3. yarn dev
4. Load localhost:3000 with dev tools open
5. See error similar to Warning: Prop \data-react-beautiful-dnd-draggable` did not match. Server: "1" Client: "0"`

Expected behavior

To get the expected behavior:

1. Continue from the reproduction steps
2. Run: yarn remove react-beautiful-dnd && yarn add [email protected]
3. yarn dev
4. Load page with dev tools open
5. No longer an error

Desktop (please complete the following information):

• OS: macos
• Browser: chrome
• Version: 79.0.3945.79

Additional context
I think the best solution to this would be for material-table to re-export the resetServerContext function from react-beautiful-dnd. This probably will work the best since it doesn't require devs to lock their react-beautiful-dnd dep to the same version that material-table is using.

If that is an acceptable solution, I have a fork and can open a PR.

[hutber]

I can confirm this is happening with my build.

[maximilienGilet]

Happening too

[Chris533]

Removed comment

Two methods:

1.Disable draggable

<MaterialTable
...
      options={{
        draggable: false
      }}
...

1. use resetServerContext
   _document.tsx

// @ts-ignore
import { resetServerContext } from 'react-beautiful-dnd'
...
  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => {
        resetServerContext()
        return sheets.collect(<App {...props} />)
      }
    })
...

---

If with MUI
_app.tsx

Function

  React.useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      // @ts-ignore
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

Class

componentDidMount() {
  // Remove the server-side injected CSS.
  const jssStyles = document.querySelector("#jss-server-side")
  if (jssStyles) {
    jssStyles.parentElement!.removeChild(jssStyles)
  }
}

[Chris533]

Removed comment

https://material-table.com/#/docs/all-props

https://github.com/atlassian/react-beautiful-dnd/issues/1617

https://material-ui.com/guides/server-rendering/#the-client-side

[kyle-mccarthy]

@Chris533 I am not sure if you read the issue... but the problem is that material-table may be using a different version react-beautiful-dnd from the version the user has installed. This makes calling resetServerContext reset the wrong context, since each version of react-beautiful-dnd have their own unique context.

[Chris533]

@kyle-mccarthy

Oh, yes, I'm sorry.

I removed the comments.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.