I have a custom component that i was trying to bind data to and while i was successfully able to bind data to it, I was immediately getting hydration mismatch errors. Here is the code for the custom component: import Button from “./button”; import { getDefaultContent } from “./event.content”; im…

Hi @jhs129 , Could you please try to include the option enrich:true in the get function of the builder integration code? Let us know if the issue persists!

Thanks Garima. Could you by chance provide an example of how to do that? Would it be something like this: const page = await builder .get(“page”, { userAttributes: { urlPath: “/” + (params?.page?.join(“/”) || “”), }, enrich: true }) .toPromise(); Or would it be added at the same level as …

That seems correct. Here is the doc link SDK Comparison - Builder.io for more info. Try this out and let me know if the issue persists!

I have exactly same error, adding enrich: true didn’t help :frowning: here’s screenshot of the problem this happens every time i add a custom component in nextjs [Screenshot 2023-12-22 at 10.56.49]

Hydration errors when binding data to Custom Components

Bugs

oleghuman December 22, 2023, 7:15am 6

just FYI, that was related to this problem

Topic		Replies	Views
Hydration Error when passing bound data to custom component Bugs react , nextjs	3	248	November 18, 2024
Data Binding causing React Hydration Mismatch errors Bugs	6	236	August 9, 2024
Hydration Error - SSR Technical Questions nextjs	8	802	November 18, 2024
Symbol with Content Input causes hydration errors in Next.js Bugs nextjs , symbols	10	113	December 27, 2024
Can't override button component Technical Questions	4	144	October 4, 2024

Hydration errors when binding data to Custom Components

Related topics