---
title: "Walkthrough: Registering an external React component"
slug: "walkthrough--registering-an-external-react-component"
abstract: "Reference your React code base in the Component builder to include a custom component in ."
---
# Walkthrough: Registering an external React component

[/xmc/en/users/xm-cloud/en/sitecoreai.html](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)includes a powerful component builder interface, which designers can use to configure, arrange, and style components. Content authors can then add components to site pages using the Page builder. The component builder lets you single-source your site content by building once and reusing while applying consistent themes.

In , there are other options for [including code in a component](https://doc.sitecore.com/xmc/en/users/xm-cloud/en/add-html-and-javascript-to-a-component.html) and [building components in JSS](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/components-in-jss-apps.html). This topic describes referencing an external React component or an entire React component library.

[The Component builder](https://doc.sitecore.com/xmc/en/users/xm-cloud/en/get-started-with-the-component-builder.html) is a low-code/no-code solution mostly used by content authors and designers to create reusable elements for a website. Developers can bring their own code (BYOC) by referencing an external code base that includes components so that they can be used in the Component builder and Pages interface. After developers complete the registration flow, React components can be [added to the builder](https://doc.sitecore.com/xmc/en/users/xm-cloud/en/add-an-external-component-to-the-component-builder.html). As a result:

- The registered component is part of the components library (scoped to a *project*) and can be used and reused within the Page builder.
- The registered component can be previewed in the Component builder and in the Page builder.
- A content author using the component in Pages can enter values for the defined input parameters.

When you use the starter foundation, it comes complete with a JSS app for handling your front end. After creating your React component, you register a BYOC React component in your JSS app.

Before referencing your external components, ensure the code base is hosted on an accessible rendering host URL. You do have the option of working locally and referencing your local rendering host for testing purposes.

> [!tip]
> To make it easier to follow this topic, in the Components app, on the **Settings** tab, click **Rendering host** and copy the commands and code from there.

This walkthrough describes how to:

- Add the `registerComponent` method to your code.
- Import the component.
- Register the rendering host (optional).
- Troubleshoot registering an external React component.

## Add the registerComponent method to your code

To register your component and specify its properties:

- Use [the registerComponent method](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/the-registercomponent-method.html "The registerComponent method"). This call has to run before the builder attempts to render the component.

## Import the component

You must import BYOC components into the app to finish registration and make them available for rendering. Starting from JSS version 21.6, this is handled automatically by the new starter foundation.

If you're using JSS version 21.5 or earlier, to import a component and ensure it is not removed during tree-shaking, use syntax to import the component for side effects. Place it at the top of `Layout.tsx`:

```text
import './ExampleHybridComponent

```

BYOC can be used in non-JSS apps as well. You can find a Next.js example application implementing this method [here](https://github.com/Sitecore/feaas-nextjs-example).

When using JSS, you can also use a predefined structure for importing BYOC components, ensuring that the components are available in the appropriate contexts:

- For client-only components, add your imports to the `src/byoc-imports/index.client.ts` file.
- For hybrid components, add your import statement to the `src/byoc-imports/index.hybrid.ts` file.

## Register the rendering host

When developing locally, or if you use your own editing host, you can register the rendering host within the Component builder.

Registering the rendering host enables the Components app and Pages editor to correctly load and render external components during authoring and visual editing.

> [!note]
> Registering components from another rendering host or frontend application (for example, Vercel or Netlify) does not automatically make them available in the Components app/Page builder editor for the visual editing experience. To use components in the Components app/Page builder editor, the appropriate rendering host must be registered in the Components app.

To register the rendering host:

1. In Components, on the **Settings** tab, click **Rendering host**.
2. In the **Set your rendering host** field, enter your publicly accessible URL and click **Save**. This fetches your React code and registers it within the Components app.

After a short wait, you can see an updated indication of the number of registered components.

## Troubleshoot registering an external React component

When registering an external React component, you might get a `Could not find registered BYOC component` server-side error combined with a client-side (browser) hydration error.

The front-end-as-a-service (FEAAS) SDK supports CommonJS and ES modules, whereas JSS uses CommonJS. This error indicates that your Next.js application lacks the webpack plugin that ensures FEAAS and JSS use the same module formatting system.

To eliminate the error:

1. Download [the plugin file](https://github.com/Sitecore/jss/blob/dev/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/next-config/plugins/feaas.js) in your application in the `src/lib/next-config/plugins` folder.
2. Redeploy your application.