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>.

Just change express response from

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

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

Remove space between tags

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.

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

I found a solution. If the modal show state comes true first, it produces this warning. So I made it first undefined then I set it true after the page rendered . The code is below.

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

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

Related

Recent Posts