Markup different on the server and the client

[ile]

I'm new with MERN, so not sure if I'm doing something wrong.... but, I get this:

warning.js?8a56:44Warning: 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) " data-reactid="1"><div data-reactid="2"
 (server) " data-reactid="1"><!-- react-empty: 2 -

Seems like the markup is otherwise the same, but there is this extra comment <!-- react-empty: 2 --> just after <div data-reactroot="" data-reactid="1" data-react-checksum="1358521740">, on the server side.

This seems to happen if I create the project with mern executable and use that and also if I clone the 2.0 branch and use that...

[lubien]

Last time I got this (I wasn't using mern.io) the cause was my server rendering my component without it having the initial data that was retrieved async. But in the client it had time to get the data and rendered differently from the server.

[joernroeder]

Maybe related #139

[somus]

There is a problem in v2 branch after implementing react-router code splitting. Initially, the client is generating an empty response which is not matching with the server response. That's why this warning comes. But, everything works as expected.

[SOSANA]

@somus closing last PR #181 , only doing one PR to fix this bug, next will be to fix png issue in header, and another PR to fix inital render of client before server

[colinshen]

I'm using mern.io with react bootstrap. I'm getting this warning, and source codes are totally different from client and server rendering. is there are way to fix this with react bootstrap?

[amankkg]

Small workaround could be something like that:
instead of

<div id="root">${html}</div>

paste this

<div id="root">${process.env.NODE_ENV === 'production' ? html : `<div>${html}</div>`}</div>

at server/server.js#L80
👌 so you'll get rid of this warning in dev mode (if you are using Redux DevTools) and keep production markup unchanged.