Hi, i am working with Builder.io with NextJS and work perfectly in development mode but when i switch to production mode (npm run build && npm start) i get an error that prevent rehydrate the page and a error message is showed in the console
This is a rare case because i have another project with the exactly same code and api credentials and it work perfectly in development mode.
This is my page code
import { useRouter } from "next/router";
import { BuilderComponent, Builder, builder } from "@builder.io/react";
import DefaultErrorPage from "next/error";
import Head from "next/head";
import Page404 from "./404";
const BUILDER_API_KEY = "some-key";
builder.init(BUILDER_API_KEY);
export async function getStaticProps({ params }) {
const page =
(await builder
.get("some-model", {
userAttributes: {
urlPath: "/" + (params?.page?.join("/") || ""),
},
})
.toPromise()) || null;
return {
props: {
page,
},
revalidate: 5,
};
}
export async function getStaticPaths() {
const pages = await builder.getAll("some-model", {
options: { noTargeting: true },
});
return {
paths: pages.map((page) => `${page.data?.url}`),
fallback: true,
};
}
export default function Page({ page }) {
const router = useRouter();
if (router.isFallback) {
return <h1>Loading...</h1>;
}
const isLive = !Builder.isEditing && !Builder.isPreviewing;
if (!page && isLive) {
return (
<>
<Head>
<meta name="robots" content="noindex" />
<meta name="title"></meta>
</Head>
<Page404 statusCode={404} />
</>
);
}
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<BuilderComponent model="page" content={page} />
</>
);
}