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

35
votes

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>.
3
reactjsreact-fiber
Where is this happening? a code where you encountered the error could be help full – abdul
I don't think my code would be particularly helpful. I'm rendering server side and sending an html string to the client as a response. This is standard across any react SSR approaches – David Furlong
Likely related to "The server renderer has been completely rewritten, and now offers a streaming mode (it's currently exposed via react-dom/node-stream). Server rendering does not use markup validation anymore, and instead tries its best to attach to existing DOM, warning about inconsistencies. This server renderer code is still very new, so it is likely to have issues. Please report them." github.com/facebook/react/issues/10294 – David Furlong

3 Answers

27
votes

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.

41
votes

Just change express response from

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

to 

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

Remove space between tags

1
votes

I am faced the same warning while using Modal in Next.js. I was working create a popup at the main page.

I found a solution. If modal show state come true first, it produce this warning. So i made it first undefined after then page rendered I set it true. Code is below.

 const [modalShow, setModalShow] = React.useState();
  useEffect(() => {
    if ( modalShow === undefined ) {
      setModalShow(true)
    }
  }, [modalShow])