[NavigationDrawer] - Invalid Checksums from Server-Side Rendering

[frol]

Description

warning.js?169357b:36 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) mini md-transition--decceleration md-bac
 (server) mini md-transition--acceleration md-back

Link to a gist or code sample where the issue can be reproduced

Here is the minimal reproduction code snippet:

import NavigationDrawer from 'react-md/lib/NavigationDrawers'

export default class extends React.PureComponent {
  render() {
    return (
      <NavigationDrawer
        navItems={[]}
        drawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
      >
        <div>Test</div>
      </NavigationDrawer>
    )
  }
}

As far as I can tell, the cause is the miniDrawer, which gets rendered visible and with a wrong drawer type (it uses default full_height type):

react-md/src/js/NavigationDrawers/NavigationDrawer.js

Line 900 in 05f5b39

<Drawer key="mini-drawer" type={drawerType} renderNode={renderNode} aria-hidden={visible}>

Version

• React 15.6.1
• React-MD 1.0.15 and 1.1.0-alpha-7

[mlaursen]

Ahh, I think this is actually because the mini drawer should always be visible. When it mounts in the browser, it correctly updates to visible and you get the diff. I'll update this correctly

[frol]

I just want to confirm that the fix works like a charm using the latest release/1.0.x branch. Thank you!

[bsunderhus]

Is this really solved in the v1.0.18 @mlaursen? I'm getting an invalid checksum also in a really similar problem involving NavigationDrawer with MINI.

(client) Title<!-- react-empty: 8 -
(server) Title<span data-reactid="8

import React, {PureComponent} from 'react'

import NavigationDrawer from 'react-md/lib/NavigationDrawers'

class Root extends PureComponent {
  render () {
    return <NavigationDrawer
      navItems={[]}
      contentClassName="md-grid"
      tabletDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
      desktopDrawerType={NavigationDrawer.DrawerTypes.PERSISTENT_MINI}
      mobileDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY_MINI}
      toolbarTitle="Title"
      contentId="main-content-demo"
    >
      <div></div>
    </NavigationDrawer>
  }
}