Hydration errors when binding data to Custom Components

[jhs129]

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”;
import Image from “next/image”;

function EventTeaser(props) {

const { propTitle, propImage, propDate, propCode, propRegion, propAddress, propEventType } = props;

let event;
if (!props.event) {
event = getDefaultContent();
} else {
event = props.event;
}

let eventTitle = propTitle ? propTitle : event.title;
let eventImage = propImage ? propImage : event.image;
let eventDate = propDate ? propDate : event.startDate;
let eventCode = propCode ? propCode : event.eventCode;
let eventRegion = propRegion ? propRegion : event.region;
let eventType = propEventType ? propEventType : event.eventType;

const className = props.className ? props.className : “”;

const startDate = new Date(eventDate);

const dateOptions1 = {
weekday: “long”,
year: “numeric”,
month: “short”,
day: “numeric”,
};

const dateOptions2 = {
year: “numeric”,
month: “short”,
day: “numeric”,
};

const localizedDate = startDate.toLocaleDateString(undefined, dateOptions1);

return (

{" "}

{eventTitle}

<Image
src={eventImage}
alt={eventTitle}
width=“540”
height=“350”
style={{ borderRadius: “15%” }}
/>

{localizedDate}


{eventRegion} - {eventType}

<button href={/events/${eventCode}}>
Learn More

);
}

export default EventTeaser;

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
e.g. Builder.io: Drag & Drop Headless CMS

Builder public api key
go to Builder.io: Drag & Drop Headless CMS and copy your PUBLIC api key

Detailed steps to reproduce the bug
e.g. go to the editor, click the styles tab, try to edit opacity, notice the opacity slider does not work

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening. We love using loom for that sort of thing

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

[garima]

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!

[jhs129]

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 the

[garima]

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!

[oleghuman]

I have exactly same error, adding enrich: true
didn’t help here’s screenshot of the problem

this happens every time i add a custom component in nextjs

[oleghuman]

just FYI, that was related to this problem