Invalid checksum between server and client

[benoneal]

I get this message:

React attempted to use 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.

When using react-grid-layout to manage pages that are rendered on both the server and the client isomorphically. I can visually see that before client-side js loads, the layout looks different to after it loads. And when using .Responsive, it appears to be attempting to always use the smallest possible layout of all breakpoints specified.

When I remove the react-grid-layout component, there is no checksum error. Here is my component:

module.exports = React.createClass({
  displayName: 'Home',

  mixins: [Router.State],

  getLayout: function() {
    return {
      lg: [
        { x: 0, y: 0, w: 12, h: 3, i: 'home_heading' },
        { x: 0, y: 3, w: 12, h: 3, i: 'home_link' },
        { x: 3, y: 6, w: 6, h: 3, i: 'home_input' }
      ],
      md: [
        { x: 0, y: 0, w: 10, h: 3, i: 'home_heading' },
        { x: 0, y: 3, w: 10, h: 3, i: 'home_link' },
        { x: 2, y: 6, w: 6, h: 3, i: 'home_input' }
      ],
      sm: [
        { x: 0, y: 0, w: 8, h: 3, i: 'home_heading' },
        { x: 0, y: 3, w: 8, h: 3, i: 'home_link' },
        { x: 2, y: 6, w: 4, h: 3, i: 'home_input' }
      ],
      xs: [
        { x: 0, y: 0, w: 4, h: 3, i: 'home_heading' },
        { x: 0, y: 3, w: 4, h: 3, i: 'home_link' },
        { x: 1, y: 6, w: 2, h: 3, i: 'home_input' }
      ],
      xxs: [
        { x: 0, y: 0, w: 2, h: 3, i: 'home_heading' },
        { x: 0, y: 3, w: 2, h: 3, i: 'home_link' },
        { x: 0, y: 6, w: 2, h: 3, i: 'home_input' }
      ]
    };
  },

  devLayoutDebug: function(layout) {
    console.log(layout);
  },

  render: function() {
    return (
      <Title title="Home">
        <GridLayout
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 12, md: 10, sm: 8, xs: 4, xxs: 2 }}
          layouts={ this.getLayout() }
          rowHeight={ 40 }
          margin={ [0,0] }
          onLayoutChange={ this.devLayoutDebug }>
          <div style={ style.heading } key={ 'home_heading' }>Charity Profile</div>
          <div style={ style.outline } key={ 'home_link' }><Link to="profile" params={{ charitySlug: "Test Profile" }}>Profile</Link></div>
          <div style={ style.outline } key={ 'home_input' }><Input i18n={{ name: 'profile_test', label: 'Input Label' }} /></div>
        </GridLayout>
      </Title>
    );
  }
});

[STRML]

Could you post a minimal example so I can give it a try?

You may also be able to figure it out if you copy/paste the HTML that came from the server (get it via curl or the inspector), and copy/paste the actual HTML from the DOM, then diff them.

[STRML]

Please reopen if this is still an issue for you.