Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React 16 warning "warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>."

I'm using the React 16 beta (react-fiber) with server side rendering

What I am to understand this to mean?

warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>. 
like image 674
David Furlong Avatar asked Jul 27 '17 12:07

David Furlong


2 Answers

Just change express response from

<body>     <div id="root">         ${markup}     </div> </body> 

to

<body>     <div id="root">${markup}</div> </body> 

Remove space between tags

like image 171
Sagar Avatar answered Sep 18 '22 12:09

Sagar


Looking for that error in the react code it seems that this happens when the SSR html can't be rehydrated.

https://github.com/facebook/react/blob/7a60a8092144e8ab2c85c6906dd4a7a5815cff1f/src/renderers/dom/fiber/ReactDOMFiberComponent.js#L1022

So you are somehow initially rendering a different tree on the client vs the server.

like image 39
w00t Avatar answered Sep 17 '22 12:09

w00t