React Integration setup - page content always coming back not found

Builder public api key

What are you trying to accomplish
I want to integrate builder with a page (any page) in my app. I’ve gone through the page integration docs and tried to insert the builder component into a few different components. The components I’ve been inserting them into are all high level components that wrap multiple pages in my app.

Every time I run my app the value of content is coming up undefined, and the ‘Not Found’ div is being rendered. When window.location.pathname is being printed correctly, why is content still coming up undefined?

Screenshots or video link

Code stack you are integrating Builder with
React 18, npm 8, React Router (custom version of v1.0)

Reproducible code example


const AppChrome = forwardRef<HTMLDivElement, AnyObject>(function AppChrome(props: AnyObject, ref) {

    useEffect(() => {
        const { AppActions } = Flux.actions;
    }, [props.currentAccountUuid]);

    const isPreviewingInBuilder = useIsPreviewing();
    const [notFound, setNotFound] = useState(false);
    const [content, setContent] = useState(undefined);

    useEffect(() => {
        async function fetchContent() {
            const content = await builder
                .get('page', {
                    url: window.location.pathname,

            console.log('content: ', content);
            console.log('pathname: ', window.location.pathname);


            if (content?.data.title) {
                document.title =;
    }, [window.location.pathname]);

    if (notFound && !isPreviewingInBuilder) {
        return <div>NOT FOUND</div>;

    return (
            <BuilderComponent model="page" content={content} />
            <AppLayout {...props} />

export default AppChrome;