Help with BuilderComponent not rendering

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
a01f0793636740a6be482bc2528bdcd5

What are you trying to accomplish
I’m investigating integrating builder.io into a fairly straightforward React application to allow non-technical users to design marketing content.

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
React

Reproducible code example
Here’s the code I’m using with the goal of simply rendering the content designed in builder within one of our pages (so there’s a header and footer around it). is a simple progress widget while it’s loading.

// @ts-nocheck
import * as React from "react";
import {builder, BuilderComponent} from "@builder.io/react";
import {useEffect, useState} from "react";
import {CenteredLoading} from "../../components/loading";

const API_KEY = "a01f0793636740a6be482bc2528bdcd5";

builder.init(API_KEY);

export function BuilderBasedPage({page}: {page: string}) {
    const [content, setContent] = useState(null);

    // get the page content from Builder
    useEffect(() => {
        async function fetchContent() {
            const content = await builder
                .get("page", {
                    url: page,
                })
                .promise();

            setContent(content);
            console.log(content);
        }
        fetchContent();
    }, [page]);

    return content ? <BuilderComponent model="page" component={content} /> : <CenteredLoading />;
}

I see a network request made and it looks like it gets some structured content for the page that looks reasonable. However, it doesn’t actually render anything. When inspecting with the Chrome dev tools I just see:

CleanShot 2025-04-16 at 16.25.40

Any ideas what’s going on? I’m not sure if it’s related, but you might also notice the @ts-nocheck at the top. Without it, I get this error:

      TS2786: 'BuilderComponent' cannot be used as a JSX component.
  Its instance type 'BuilderComponent' is not a valid JSX element.
    Type 'BuilderComponent' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.

I can’t seem to figure out why Typescript is confused here. The control does seem to be doing something.

Thanks for any help.