5

I am using react 16.2.0 and doing SSR. My web app blink after hydration. So to find error or mismatch in server rendered HTML and client rendered HTML, I ran the code in development mode. Now it shows 

warning.js?6db0:33 Warning: Did not expect server HTML to contain a <div> in <div>.

I know this error is due to deletion of some div from server rendered HTML to client rendered HTML.

But now, my question is ...how to debug this? there is no reference to element node where it is happening. One solution is to check the whole page manually. Is there any other way..more efficient. How to resolve this warning?

Uchit Kumar
  • 667
  • 10
  • 26
  • You can try to check the whole page semi-manually with diff tool. E.g. open meld (multiplatform diff-tool), create new diff and copy rendered and fetched html. – iofjuupasli Mar 19 '18 at 09:53
  • i will try.. is there any other way – Uchit Kumar Mar 19 '18 at 10:09
  • Are you using react router in your application? I came across the same issue, as my SSR render is wrapped in a div (the div your rendered react is injected into), however my client side was not wrapped in a div as the react router code does not require it (it is the app wrapper). If this resolves your issue I will post this up as an answer. – Jack Dalton Mar 19 '18 at 10:45
  • @JackDalton no it doen't have extra div ... but we have an extra attribute `
    ` is this the reason ?
     – Uchit Kumar Mar 19 '18 at 11:55
  • This is what I was referring to. So yes, I believe this is the issue. Unfortunately I am unsure as to how you fix this. I would suggest appending a div to mirror this additional data-react-root div, and see if that works. – Jack Dalton Mar 19 '18 at 12:04
  • @JackDalton I corrected that.. but still same error..I eliminated all diff... no luck – Uchit Kumar Mar 20 '18 at 12:07
  • When bundle.js is executed, it's going to delete the content inside the root div and recreate it in JS. I believe this is the reason for the blink. – Kira Feb 15 '19 at 17:48
  • Is getting rid of the warning your main concern now, or is it eliminating the blink ? – Kira Feb 15 '19 at 17:55

0 Answers0