State is showing as empty in Builder

@manish-sharma

I just integrated data entry from a builder data model and the state shows up as empty.

Please help me resolve this.

Hello @sohail!

Can you share the builder content link, where I can reproduce this issue?

Does this help?

I am also seeing hydration error in my pages. Builder components pages are showing hydration error.

import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";

builder.init(process.env.BUILDER_PUBLIC_API_KEY ?? "");

type PageProps = {
  params: {
    page: string[];
  };
};

export default async function Page(props: Readonly<PageProps>) {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  const content = await builder
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/" + (props?.params?.page?.join("/") || ""),
      },
      // Set prerender to false to return JSON instead of HTML
      prerender: false,
    })
    // Convert the result to a promise
    .toPromise();

  return (
    <>
      {/* Render the Builder page */}
      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
      <RenderBuilderContent content={content} />
    </>
  );
}

Hello @sohail,

To address the data binding issue you’ve encountered, I recommend referring to the following Loom video for detailed guidance: Loom Video.

Additionally, for resolving hydration errors, I suggest using our hydration overlay plugin. This tool can assist you in identifying the root cause of the issue and facilitate troubleshooting. You can find more information about the hydration overlay plugin in our blog post: Announcing React Hydration Overlay.

Thanks,

Sure I will go through it. Thank you