# JS error: Hydration completed but contains mismatches

**URL:** <https://community.weweb.io/t/js-error-hydration-completed-but-contains-mismatches/6263>\
**Category:** Ask us anything\
**Created:** [January 8, 2024, 9:12am UTC](https://community.weweb.io/t/js-error-hydration-completed-but-contains-mismatches/6263 "2024-01-08T09:12:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![AmAb](https://avatars.discourse-cdn.com/v4/letter/a/e9c0ed/32.png) [@AmAb](https://community.weweb.io/u/AmAb)\
**Post date:** [January 8, 2024, 9:12am UTC](https://community.weweb.io/t/js-error-hydration-completed-but-contains-mismatches/6263/1 "2024-01-08T09:12:48Z")

</div>

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/](https://www.skilify.app/talent-dashboard/)

Anyone have an idea how to solve this?

Amab

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [January 8, 2024, 9:35am UTC](https://community.weweb.io/t/js-error-hydration-completed-but-contains-mismatches/6263/2 "2024-01-08T09:35:57Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c3ed046b93bfe0d54f2849db463b476e150f4a92.png)

---

<div class="post-metadata">

**Author:** ![AmAb](https://avatars.discourse-cdn.com/v4/letter/a/e9c0ed/32.png) [@AmAb](https://community.weweb.io/u/AmAb)\
**Post date:** [January 8, 2024, 9:49am UTC](https://community.weweb.io/t/js-error-hydration-completed-but-contains-mismatches/6263/3 "2024-01-08T09:49:47Z")

</div>

Very nice, thank you Dorilama 🙂

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

Thanks again.