I have implemented Builder in my nextJs codebase and now I am trying to add custom components to it. Unfortunately I am not able to register my components to get uploaded to the builder editor.
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
import { useRouter } from 'next/router';
import { BuilderComponent, Builder, builder } from '@builder.io/react';
import DefaultErrorPage from 'next/error';
import Head from 'next/head';
const BUILDER_API_KEY = 'my_key';
builder.init(BUILDER_API_KEY);
import 'components/shared/NavBar';
// tells you what paths are being built
export async function getStaticProps({ params }: GetStaticPropsContext<{ page: string[] }>) {
const page =
(await builder
.get('page', {
userAttributes: {
urlPath: '/' + (params?.page?.join('/') || ''),
},
})
.toPromise()) || null;
return {
props: {
page,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every 5 seconds
revalidate: true,
};
}
// returns a list
export async function getStaticPaths() {
const pages = await builder.getAll('page', {
options: { noTargeting: true },
omit: 'data.blocks',
});
return {
paths: pages.map((page) => `${page.data?.url}`),
fallback: true,
};
}
// React Component
export default function Page({ page }: InferGetStaticPropsType<typeof getStaticProps>) {
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>
<DefaultErrorPage statusCode={404} />
</>
);
}
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<BuilderComponent model="page" content={page} />
</>
);
}
Hello Niko, thank you for your patience. Did you replace the API key with your own? If so and you’re still having trouble are there any console errors or additional details you could share? I can also help you look into this further if you share a code sandbox and a link to your builder content page.
Hi @hlopez if you share your code and a link to your builder content page I can help you look into it. The code above seems valid. I’ve noticed that often times when users don’t see their custom component in the menu and everything else is working fine it is because the preview URL needs to be updated to your local dev server (e.g. localhost:3000) or the domain where your app is deployed. Let me know if that helps!
@ancheetah I’m having a similar issue, right now I’m only working on a proof-of-concept integration locally.
I already had access to my custom components but their availability seems volatile, after a refresh they disappeared and I’m having trouble figuring out how to make them reliably present in the editor.
Hi @Atti , if you’ve followed the steps above and they only disappear intermittently it is possible this could be a bug but hard to tell without seeing it. Since this is occurring locally, it would be great if you could share a reproduction via Github or deploy so I can take a closer look. Thanks!
Well, i am facing this problem in only my sections page i mean i have created a Custom Components and i am getting it in my Page Models its showing up there but when i go the the Section Models
We are also experiencing issues with our custom components. Within the last 7-10 days they have disappeared. They seem to work on existing pages but not on new ones. We haven’t made any code changes. We have been using custom components for over 2 years.
To assist you better, could you please share a screenshot of your project directory structure? Additionally, it would be helpful if you could provide details on how and where you are registering those custom components within your project.
These are imported into [[…page]].tsx which creates the <BuilderComponent model="page" content={page} options={{ includeRefs: true }} key={router.asPath}/>
I think I figured this out. We recently implemented Sentry.io which appears to be sending additional headers as part of it’s preflight requests which is being blocked by the builder CORS policy.
Ideally we would like to see traces to measure performance from builder.io. Is there any way to configure these headers?
Unfortunately, Builder.io does not currently offer a built-in feature to configure headers for tracing purposes. However, you may be able to implement a workaround by modifying your server configuration or using a proxy server.
One possible approach is to set up a proxy server that sits between your application and Builder.io. This proxy server can intercept requests to Builder.io and modify the headers before forwarding them. By configuring the proxy server to add the necessary headers for tracing, you can ensure that traces are captured while still allowing Sentry.io requests to proceed without interference.
Alternatively, you could explore options within Sentry.io to adjust its request behavior and reduce the number of additional headers sent during preflight requests. This may involve adjusting settings or configurations within Sentry.io to minimize its impact on CORS policies.
Ultimately, the specific solution will depend on your infrastructure setup and requirements.
