Unable to register custom components

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
d1ad2e591d574847973883381445c892

What are you trying to accomplish

  • I am attempted to register custom components based on what the documentation.

Screenshots or video link

Code stack you are integrating Builder with

  • NextJs, ReactJs

Reproducible code example

Annoucement.tsx

interface AnnoucementProps {
  enabled?: boolean;
  text?: string;
  buttonText?: string;
  buttonLink?: string;
}

const Annoucement: React.FC<AnnoucementProps> = ({
  enabled,
  text,
  buttonText,
  buttonLink
}) => {
  return (
    enabled &&
    <div className="bg-pb-yellow-100 rounded-lg p-4 flex flex-col gap-x-2 text-xs font-medium md:flex-row justify-center items-center text-center gap-y-2">
        <p>{text}</p>
        <a
          href={buttonLink}
          className="bg-pb-yellow-300 hover:bg-pb-yellow-200 text-white font-medium px-4 py-2 rounded-lg transition duration-300 ease-in-out text-xs"
        >
          {buttonText}
        </a>
    </div>
  )
}
export default Annoucement;

builder-register.ts

"use client";
import { Builder } from "@builder.io/react";
import dynamic from "next/dynamic";
import Annoucement from "./components/Annoucement/Annoucement";

Builder.registerComponent(Annoucement, {
  name: "Annoucement",
  inputs: [
    {
      name: "buttonLink",
      type: "string",
      defaultValue: "https://google.com",
    },
    {
      name: "buttonText",
      type: "string",
      defaultValue: "Button Text",
    },
    {
      name: "enabled",
      type: "boolean",
      defaultValue: true,
    },
    {
      name: "text",
      type: "string",
      defaultValue: "Hello World",
    },
  ],
});
2

Is this file explicitly imported in your app? I’m not sure if it’s the same with the Builder Devtools registration, but for me there was always an issues where Builder wouldn’t pick up on custom components unless their registration code was imported into _app.ts (Next 12) or layout.ts (Next 13), e.g. import '@/path/to/builder-register.ts.

1 Like
3

Hello @JonathanLand, @tlee-pb!

Welcome to the Builder.io forum post.

We’re aware of the issue you’ve encountered. To address it, you’ll need to explicitly import register-component.ts either in your layout.tsx or builder.tsx file. Another potential solution is to include builder.init("API-KEY") in your register-component.ts file.

Best regards,

2 Likes
4

Hello @JonathanLand, @manish-sharma,

Thank you so much for the prompt reply.
:tada: It is working :tada: woohoo~
Adding the builder-registry.ts inside components/builder.tsx works, but not adding to the layout.tsx.

Is the documentation open sourced that we can update this to the component integration section?

1 Like
5

Hello @tlee-pb,

We’re delighted to hear that the solution is working for you. While our documentation is not open source, we do plan to update it to reflect this information. Your feedback is valuable in helping us improve our documentation for the benefit of all users.

If you have any more questions or need further assistance in the future, please don’t hesitate to reach out. We’re here to help.

Best regards

6

met with the same problem, the solution from @tlee-pb worked

Adding the builder-registry.ts inside components/builder.tsx works, but not adding to the layout.tsx .

7

Could share a video, please? To see what is wrong with your issues.