JS error: Hydration completed but contains mismatches

Ask us anything
1

Hello,

I have included the JS library D3 for charts visualization to weweb.

I included the CSS and the JS files + script in the page custom code. Then I added an embed HTML custom element to the page to include the div where to render the chart.

The chart doesn’t show at all in the editor. But when I publish the project (with option pre-rendering enabled), the chart shows then disappears with this JS error in the console: Hydration completed but contains mismatches.

Here is the page (I have made the page accessible to everyone for the purpose of this post, it’s normally a user authentificated page):
https://www.skilify.app/talent-dashboard/

Anyone have an idea how to solve this?

Amab

2

Some quick suggestions:

  • move this in a custom code component where you have full control on what hapens and when
  • if this ui is 100% controlled with your code in the head + html component you can move it in a separate section and disable the hydration of the section
    image
3

Very nice, thank you Dorilama :slight_smile:

I moved it in a section and disabled the hydration. It works perfectly now!

Thanks again.

2 Likes