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

user_1216142 0
Viewed 66728

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>.
react-fiber reactjs
5 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

user_45912410

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])
user_64914080

I had this issue, I solved it where I changed this:

<div>
    <Header />
    {children}
</div>

to this:

<div>
    <Header />
    <div>{children}</div>
</div>
user_188426750

My issue was react-loadable: The code used LoadableComponent for client only which wrapped each of my React-Component in client.

The cause was hard to find because Client and Server rendered the same HTML.

My Solution:

  1. upgrade to node 16.x
  2. remove react-loadable
  3. load all components using import
user_40636220
Related