SSR warning due to different checksums on client and server

[vladejs]

I am using Flow Router SSR, when using an <AutoForm> component I get this error on browser console:

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) tid="4"><label for="bbp70g2bm510khqp" cl
 (server) tid="4"><label for="ne1wrgd9mjrcz0k9" cl

Any ideas on how to tackle this?

[radekmie]

Ha! It's because every field receives an id - given or random. I don't really know, what to do about it... Any ideas?

[radekmie]

Here is related React issue.

[radekmie]

I've fixed it on devel branch. It would be great if you could test it and let me know, if it works correctly.

[vladejs]

Awesome, i haven't tested yet, but I indeed that's a react issue.
How did you fixed it?
Currently Iam seeing the same warning in my SSRed page and components which doesn't have forms.

[radekmie]

Well, basically it works like this - every form has it's own id generator and share it to all it's fields, so every form and every field has guaranteed id (of course provided custom id is respected).