Missing registration for ..., have you included the registration in your bundle?

Technical Questions
1

Builder content link

Builder public api key
7f0ff02e43cb4c319b2783b8af91bb68

What are you trying to accomplish
The setup is that we are using a section model as a template for ecommerce product pages. The data is sourced from the URL parameter, which maps to an Ecommerce item CMS data model. The Ecommerce item page section model to which I am referring allows using the Builder drag-and-drop editor to compose the template, which is then filled in by queried Ecommerce item CMS data.

Specifically, I want to be able to drag-and-drop custom components that will link to the Ecommerce item data model, such as Ecommerce item title and Ecommerce item description, so that users can craft their own templates for product pages in one place, the Ecommerce item page section model.

However, whenever I try to register the EcommerceItemTitle component and load the page, I get “Missing registration for EcommerceItemTitle, have you included the registration in your bundle?”

I’m not sure if it’s related or not but I keep getting the “Builder integration error: Looks like the Builder SDK has not been initialized properly (your API key has not been set). Make sure you are calling builder.init("«YOUR-API-KEY»"); as early as possible in your application’s code,” even after calling builder.init(process.env.SITE_ID) in every conceivable way:

// in _app.js
builder.init(process.env.SITE_ID);

function MyApp(...) {...}

// in [[...page]].js

builder.init(process.env.SITE_ID);

export const getStaticPaths = (...) => {
  builder.init(process.env.SITE_ID); // Just in case the above didn't work
  ...
}

export const getStaticProps = (...) => {
  builder.init(process.env.SITE_ID); // Just in case the above didn't work
  ...
  return { ..., siteId: process.env.SITE_ID}
}

export default function Page({siteId}) {
  useEffect(() => {
    builder.init(siteId)
  }, [siteId])

  ...

It doesn’t seem to help if I delete the builder.init in some places or not, it just doesn’t work. I thought it was working earlier but something must’ve broken…

Code stack you are integrating Builder with
NextJS run with SITE_ID="7f0ff02e43cb4c319b2783b8af91bb68" npm run dev. I can confirm that process.env.SITE_ID matches the value above…

2

My custom setup was the problem. If you are using builder or Builder or any other components from the @builder.io/react library outside of your page templates, you have to make sure they initialize builder.

3

Sorry, I got the same error and I didn’t understand how you solved it.