Our published page is not rendering properly but looks fine when previewed and from the builder editor.
Builder content link
Builder public api key
67d113c4afd947a7aa749b203e99ace6
Screenshots or video link
Code stack you are integrating Builder with
NextJS
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!
Hello @spm922,
I think the publish page is not updating and it’s showing an older version, the testimonials section supposed to be a symbol, however, on the live page, it is still a section block which is incorrect.
I just added our How It Works component and redeployed the site on Vercel. The testimonial, learn more, FAQ, and footer are still messed up on the live page but look fine in editor and preview.
Thank you for the thorough review! I published the text on the page and it loads as expected.
Our SDK version is
"@builder.io/react": "^3.2.6"
import type { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import { useRouter } from "next/router";
import { BuilderComponent, Builder, builder } from "@builder.io/react";
import "@builder.io/widgets";
import Head from "next/head";
import { NextSeo } from "next-seo";
import { Navbar } from "../components/navbar";
// Builder Components
import "../components/builder-components/builder-action-feature";
import "../components/builder-components/builder-cta-image-left-centered";
import "../components/builder-components/builder-faq";
import "../components/builder-components/builder-footer";
import "../components/builder-components/builder-hero";
import "../components/builder-components/builder-open-graph";
import "../components/builder-components/builder-product-list";
import "../components/builder-components/builder-service-benefits";
import "../components/builder-components/builder-service-detail";
import "../components/builder-components/builder-testimonials";
import "../components/builder-components/builder-three-column-feature";
import "../components/builder-components/builder-three-column-lists";
import "../components/builder-components/structured-data/article";
import "../components/builder-components/structured-data/breadcrumb";
import "../components/builder-components/structured-data/job-posting";
import "../components/builder-components/structured-data/url-carousel";
import "../components/builder-components/structured-data/local-business";
import "../components/builder-components/builder-logo-clouds"
import "../components/builder-components/builder-three-column-feature-v2"
import "../components/builder-components/builder-cta-simple-center"
import "../components/builder-components/builder-how-it-works"
export async function getStaticProps({
params,
}: GetStaticPropsContext<{ page: string[] }>) {
const page =
(await builder
.get("page", {
userAttributes: {
urlPath: "/" + (params?.page?.join("/") || ""),
},
})
.toPromise()) || null;
return {
props: {
page
},
revalidate: 5,
notFound: !page,
};
}
export const getStaticPaths = async () => {
const results = await builder.getAll("page", {
fields: "data.url",
key: "all-pages",
limit: 200,
options: {
noTargeting: true,
},
});
return {
paths: results.map((page) => `${page.data?.url}`),
fallback: false,
};
};
export default function Page({
page,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter();
const isLive = !Builder.isEditing && !Builder.isPreviewing;
return (!page && isLive) || router.isFallback ? (
<></>
) : (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
</Head>
<NextSeo
title={page.data.title}
description={page.data.description}
canonical=""
openGraph={{
type: "website",
url: page.data.url,
title: page.data.title,
description: page.data.description,
images: [
{
url: page.data.image,
width: 361,
height: 361,
alt: "TekDash",
type: "image/jpeg",
},
],
site_name: "tekdash.com",
}}
/>
<Navbar />
<BuilderComponent model="page" content={page} options={{ includeRefs: true }} key={router.asPath}/>
</>
);
}
Hello @spm922,
In your builde.get call and BuilderComponent can you add the enrich: true option
const page =
(await builder
.get("page", {
userAttributes: {
urlPath: "/" + (params?.page?.join("/") || ""),
},
options: { enrich: true },
cachebust: true
})
.toPromise()) || null;
<BuilderComponent model="page" content={page} options={{ includeRefs: true, enrich: true }} key={router.asPath}/>
Let us know how that works for you!
Thank you!
Hello @spm922,
After further investigation, we’ve identified the actual issue causing the layout to break. It appears that some of the Tailwind classes are not being applied to your custom components, such as md:grid md:grid-cols-3 md:gap-8. These Tailwind classes are not applied to the footer custom component, and some of the applied style attributes are also missing.
Currently, I’m unable to fix the issue as the style tab is not available when editing symbols. Is this something you have disabled intentionally?
@manish-sharma Very interesting. No the style tab is not intentionally disabled. All of the styling is handled through the custom component. We rarely use the styling features in Builder.
Just to note the Tailwind classes you mentioned are present in the component code, but I see they are missing in the live page.
Components-only mode is enabled for our symbol model. Perhaps that is why the styling menu is missing. This is intentional.
Hello @spm922,
If it’s okay can we disable custom component-only mode for some troubleshooting? Mainly to verify the styles being applied from builder.
Hello @spm922,
For the issue with tailwind classes missing, this seems to be a known issue, and you may find solution at the following forum post link Grid or column view - column-span - #9 by radikris
@manish-sharma I disabled component only mode. The solution you linked is not applicable to our use case. The tailwind classes are statically defined within our component code. We do not pass in any variables.
It appears that the tailwind class is being stripped out on the live page. The footer component works fine on other pages, for example New Ethernet Cable Installation | On-Site | TekDash.
Hi Manish - Just wanted to follow up here. I put together another video trying to explain what I’m seeing. As far as I can tell, the tailwind classes are not being respected on builder hosted components. Do you have any suggestions on how we fix this?
