Builder.init in SSG function

Technical Questions
1

What are you trying to accomplish
I would like to run builder.init in the SSG block of my Next.js site (in getStaticProps) without throwing an error. That way, I can deploy multiple Builder websites with a single Next.js application.

Screenshots or video link
As you can see in the screenshot below, my website’s page loads fine. However, in the console, I get an error that the “Builder SDK has not been initialized properly”. I don’t think that this is a valid error as the site works. I’d like to understand why I shouldn’t initialize Builder like this if it should be there. In my opinion, I should be able to choose to do it there, especially if it works…

site loading fine but with an error
site loading fine but with an error2790×613 102 KB

Code stack you are integrating Builder with
This is Next.js with SST + AWS.

Reproducible code example
I don’t have a code example but it’s pretty easy to reproduce:

  1. Create a Next.js Builder deployment and at least 1 Builder space.
  2. Move the [[...page]].js file into a folder called [siteId].
  3. Add the code below in place of previous getStaticPaths and getStaticProps and make sure to remove builder.init(...) from where it was originally:
export async function getStaticPaths() {
  return {
    paths: [],
    fallback: 'blocking',
  };
}

export async function getStaticProps({ params }) {
  builder.init(params.siteId); // Why does this throw and error?

  const page = await builder
    .get('page', {
      userAttributes: {
        urlPath: '/' + (params?.page?.join('/') || ''),
      },
    })
    .toPromise();

  return {
    props: {
      page: page || null,
    },
    revalidate: 5,
  };
}
  1. Go to localhost:3000/{yourSpacesId}/{someWebPage}.
2

Hi @vrio_dave, Thank you for contacting Builder.io Forum!

getStaticProps function executes only on the server side (hence the initial render is fine), but the builder.init is missing when it’s executing on the client side, and hence the error.

Hope this makes sense, feel free to reach out if you have further questions!

3

Thanks for the response!

What would not running builder.init on the client side break? It seems that most functionality still works…

4

Hi @vrio_dave, Thanks for getting back & hope you’re doing well!

You’re correct, lots of functionality will continue to work, except tracking/insights and any functionality that relies on interaction with our API because getStaticProps is a function that gets called at build time only so the error you’ve seen in the console is to show that something is off. You might try adding like this:-

export default function Page({ page, siteId }) { 
  builder.init(siteId)
}
5

That did the trick, thanks @garima!

1 Like