Cannot register custom component

Visual Editor Help
,
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
3ab6ff726c4c41adb49518e2e3341044

What are you trying to accomplish
I want to register custom component it is showing up in my localhost visual editor but if I try to implement then i get console errors(images below) and cannot see in the visual editor with live preview url(not local host)

I’m a user that invited to space and have a full admin right

also I cannot publish current update through visual editor, it says published after click button but it won’t on live.

Screenshots or video link
*Screenshots of your issue, or even better a link to a video of

error 1
error 11080×238 32.1 KB

error 2
error 21073×150 31.1 KB

Code stack you are integrating Builder with
Next.js 14
typescript

Reproducible code example
https://codesandbox.io/p/live/e70e86b2-bbac-4f79-aed5-582c11387556

example code file is in ‘/app/example.tsx’ and ‘/package.json’
this link includes

  • builder-registry.ts
  • component that want to register
  • builder.tsx
  • package.json
2

Hi Joon,

My name is Veronika and I am a Customer Engineer here at Builder.

Unfortunately, the code sandbox did not work for me. Would you you be able to please share your builder.registry file, as well as the code to the component that you are trying to register? That will give me a better understanding of the behavior that’s happening here.

Here are some troubleshooting tips in the meantime:

  • Make sure that you have the SDK installed in your project. For React, you can run:
    npm install @builder.io/react

  • Ensure that your custom component is registered correctly and the proper configuration is in place. Double-check that the “Preview URL” in the Builder.io setup is correct for your staging or live environment. Additionally, make sure your components are properly registered and included in the build for deployment environments.

For the publishing updates in the Visual Editor, please verify that all connections to the live environment are correct as well.

I went ahead and looked into the warnings you provided screenshots of also, and it seems like the first warning could be a mismatch between server-rendered content and client-rendered content which can indicate a hydration error.

Here is a doc that may be helpful in terms of registering your own custom components. Here’s another doc that may be helpful in terms of adding options to your own custom components.

Please let me know if you have any further questions,

Thank you.

3

I was also able to find this article for the second warning that you’re experiencing. It seems that this is a React error when a component tries to update the state of another component during the rendering phase - causing the issue.

I’d be happy to help you debug further if you can share your component code.

Thanks!

4

Thanks for replying Veronica!

fortunately registering component problem is solved by fixing docker configurations,
so I don’t have same console error anymore but still have the issue with publishing.

I’ve researched about the problem more Still have no solution but I’ve got more clues

I’m using docker compose to containerise all of our apps which builder.io includes. situation is simply
my local app <=> visual editor(w/ localhost preview url) <=> deploy(w/ live preview url)
are all they have different content and some of them just return the 404 page on live url and when click publish button on visual editor it says ‘published’.

I’ve tested publishing with different account in different local directory and it works fine.
not really sure what is the difference.

I attached package.json and page.tsx and console error I got hope this help you to get better idea.
sorry about the code sandbox link, there was my mistake
Thanks for your effort hope to get solved this problem with your help!

*** if it needs to be considered different issue, I will make the separate post about this.

Untitled1
Untitled12927×861 467 KB

Untitled2
Untitled2717×1595 176 KB

Untitled3
Untitled31170×1356 124 KB

5

Hello @Joon,

To resolve the publish issue, updating the userAttribute: { urlPath } should help.

Here’s an example of how you can implement this:

const urlPath = "/" + (props?.params?.page?.join("/") || "");
const content = await builder
  // Fetch the page content from Builder with the specified options
  .get("page", {
    userAttributes: {
      // Use the page path from the URL to fetch the content
      urlPath: urlPath,
    },
    // Set prerender to false to return JSON instead of HTML
    prerender: false,
  })
  // Convert the result to a promise
  .toPromise();

This should help address the issue. Let me know if you need any further assistance or clarification.

Best regards,