reactjsserver-rendering

React server side rendering checksum warning


I have a file upload component.

IE8: Using iframe for file upload.

Chrome: Using FormData

When doing server rendering, iframe is created in HTML.

When Chrome loads the page, there's no iframe.

So the waring is caused: Warning: React attempted to reuse markup in a container but the checksum was invalid

My question: How to handle this case?


Solution

  • You can fix this. Whether or not you should is another question...

    Whatever it is that's putting the <iframe> in the page (or not) is doing so before React is running its first render cycle. You can prevent this (and anything else that modifies the DOM) in your main components componentDidMount() method.

    There is a more complex approach of getting the userAgent string on the server and rendering appropriately there (Radium does this).

    However, that warning is harmless. It is not shown with the production (minified) version of React so only affects the development experience. In my opinion I'd say leave it as is rather than push more complex code into production because of a warning in development. Maybe just try and get the server to default to not doing the iFrame.