Login/Register
React 16 warning "warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>."
Asked Answered
Solved reactjsreact-fiber
A

13

79

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>.
Aggrandize answered 27/7, 2017 at 12:6 Comment(4)
Where is this happening? a code where you encountered the error could be help full – Mythology
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 – Aggrandize
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 – Aggrandize
I followed this url and solved my issue. blog.jannikwempe.com/… – Helga
C
42

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.

Connotative answered 28/7, 2017 at 10:44 Comment(4)
Warning name warnForDeletedHydratableElement and message Did not expect server HTML to contain a .... The warning could be definitely more verbose... – Layamon
Can you clarify what you mean by "initially rendering a different tree on the client vs the server." I have the same problem and I can't figure out any solution? – Bump
@e.omar i use context to pass around an SSR variable. On the server it's set to true, and on the client it's true for the first render and then set to false. – Connotative
If you are using next.js and the error context contains the use of next router, React.useEffect, SWR, mutate, etc. You may have a look at this comment. The warning may caused by the router. – Indivertible
E
63

This is odd but for me the issue was my password manager extension (LastPass) injecting some HTML where I have some input fields... I disabled the extension and the error was gone 🤷🏽‍♂️

Eighteen answered 16/6, 2023 at 20:50 Comment(6)
LastPass strikes again! – Vadnais
Same here! Hard to believe that could be the case. – Conferee
Jesus! Thanks guys! Lost wayyy to much time because of LastPass' extension... Disabling it solved the issue. -- To note that I also have 1password's extension in parallel and that one didn't cause any issue. – Credo
Currently, you do not have to disable the LastPass extension, you can also disable automatically form filling (the icon will not be shown in an input). Although LastPass should fix this behavior. – Monarchal
@Monarchal I don't even have credentials for the site and it's still showing the error. I think the icon in the input is causing the issue – Narvik
LastPass doesn't have the option disable on a per-site basis anymore, but you can turn off "Show fill options automatically" in General Settings, so that the icon and error go away, it'll still show the autofill options when you focus/enter the input. – Stepha
Q
59

Just change express response from

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

to 

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

Remove space between tags

Quinine answered 15/6, 2018 at 11:20 Comment(6)
Can you please explain why would you suggest this solution? – Schist
This problem is occurred when you have tried to rehydrate you react app. Generated react app rehydrate with generated markup at that time it show empty space between jsx tags. checkout this link reactjs.org/docs/react-dom.html#hydrate – Quinine
Thank you! I wasted 2 days with this problem, and none of the solutions were good. – Aristophanes
This should be the accepted answer. The current one just tells what the issue is without giving a solution. – Carduaceous
Formatting code like this looks more like a workaround to me. – Cook
This is super weird. I am using prettier and while prettifying based on current rules, it moves the variable to next line if the tag has many tailwind classNames. This is not a great solution. – Rundown
C
42

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.

Connotative answered 28/7, 2017 at 10:44 Comment(4)
Warning name warnForDeletedHydratableElement and message Did not expect server HTML to contain a .... The warning could be definitely more verbose... – Layamon
Can you clarify what you mean by "initially rendering a different tree on the client vs the server." I have the same problem and I can't figure out any solution? – Bump
@e.omar i use context to pass around an SSR variable. On the server it's set to true, and on the client it's true for the first render and then set to false. – Connotative
If you are using next.js and the error context contains the use of next router, React.useEffect, SWR, mutate, etc. You may have a look at this comment. The warning may caused by the router. – Indivertible
L
4

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])
Lynnelle answered 19/2, 2021 at 9:4 Comment(0)
R
2

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

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

to this:

<div>
    <Header />
    <div>{children}</div>
</div>
Rh answered 18/4, 2022 at 1:40 Comment(0)
C
2

I found out that my problem was caused by the component not being ready to render, so it's a well-known issue that is fixed like that.

export const ComponentWithIssue = () => {
      const [isLayoutReady, setIsLayoutReady] = useState(false);
      
      useEffect(() => {
        setIsLayoutReady(true);
      }, []);
      
      return (
        isLayoutReady && <div>Your JSX structure here</div>
      );
    };
Chose answered 14/2 at 13:21 Comment(0)
C
1

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
Cook answered 3/8, 2022 at 14:54 Comment(1)
Can you provide more details on how did you fix the issue, Do you have to totally remove react loadable? – Attribute
S
1

I am developing my project with Next.js in version 13.4.4, and at the moment of entering an <input/> in my component I was getting this header error.

However, when looking at the Dom of my browser, I found that I was automatically adding a <div></div> from the lastPass application, which is a password management extension.

enter image description here

I removed the extension and was able to fix the error, and everything works perfectly so far.

Siloxane answered 31/7, 2023 at 21:38 Comment(0)
D
1

For me adding the name property to my <input> elements fixed this issue. I assume LastPass was looking for the email and password values and caused this error as suggested by others.

Datnow answered 3/3 at 2:42 Comment(1)
am shocked i wonder how you noticed it. thanks – Odontalgia
V
0

I had the same fault, i was trying some stuff and added html element directly to the root layout.

return (
    <html lang="en">
      <body>
        {children}
        //was added here some html element who gives the error
      </body>
    </html>
  );
Volgograd answered 23/4, 2023 at 7:11 Comment(0)
P
0

The placeholder property on an <input /> tag also triggers this error... even in a static HTML component. Apparently, there must be an initial state in the browser that causes the mismatch. I guess I'll set that after load, how lame!

Paleography answered 7/6, 2023 at 21:28 Comment(0)
S
0

I'm using Next.js 12. In this case, stopping the dev server, deleting the .next directory, and restarting the dev server solved the issue.

This happened following a fix that I did to some Styled Components. I guess something was off with the Next.js cache following the fix, so deleting it helped.

Solicitous answered 20/7, 2023 at 12:17 Comment(0)
C
0

I have this problem while working with a modal.

  const [modalOpen, setModalOpen] = React.useState(true)

Solved this by just change the default state to false

Cothran answered 7/3 at 3:44 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.