# Cannot register custom component
**URL:** https://forum.builder.io/t/cannot-register-custom-component/6831
**Category:** Visual Editor Help
**Tags:** visual-editor, nextjs
**Created:** [November 27, 2024, 12:40am UTC](https://forum.builder.io/t/cannot-register-custom-component/6831 "2024-11-27T00:40:53Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Joon](https://forum.builder.io/u/Joon)
#### Post date: [November 27, 2024, 12:40am UTC](https://forum.builder.io/t/cannot-register-custom-component/6831/1 "2024-11-27T00:40:54Z")
_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.io: Visual Development Platform](https://builder.io/content/4ed443fc209243b6bbc0f9b03282fa54)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..
**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
**Code stack you are integrating Builder with**
Next.js 14
typescript
**Reproducible code example**
[https://codesandbox.io/p/live/e70e86b2-bbac-4f79-aed5-582c11387556](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
---
### Author:  [@veronikapilipenko](https://forum.builder.io/u/veronikapilipenko)
#### Post date: [November 27, 2024, 2:39pm UTC](https://forum.builder.io/t/cannot-register-custom-component/6831/2 "2024-11-27T14:39:49Z")
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](http://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](https://www.builder.io/c/docs/custom-components-setup) is a doc that may be helpful in terms of registering your own custom components. [Here’s](https://www.builder.io/c/docs/register-components-options) 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.
---
### Author:  [@veronikapilipenko](https://forum.builder.io/u/veronikapilipenko)
#### Post date: [November 27, 2024, 2:44pm UTC](https://forum.builder.io/t/cannot-register-custom-component/6831/3 "2024-11-27T14:44:51Z")
I was also able to find [this](https://www.dhiwise.com/post/how-to-fix-cannot-update-a-component-while-rendering) 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!
---
### Author:  [@Joon](https://forum.builder.io/u/Joon)
#### Post date: [November 28, 2024, 4:12am UTC](https://forum.builder.io/t/cannot-register-custom-component/6831/4 "2024-11-28T04:12:24Z")
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](http://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.
---
### Author:  [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [December 16, 2024, 2:35pm UTC](https://forum.builder.io/t/cannot-register-custom-component/6831/5 "2024-12-16T14:35:09Z")
Hello @Joon,
To resolve the publish issue, updating the `userAttribute: { urlPath }` should help.
Here’s an example of how you can implement this:
```javascript
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,