Open jonnitg opened 1 year ago
I believe you want to have a server side only builder client like below. Check out this doc for more info https://beta.nextjs.org/docs/rendering/server-and-client-components#third-party-packages
// app/builder/builder.server.config
import { builder } from '@builder.io/sdk';
builder.init(BUILDER_API_KEY);
export const builderSSR = builder;
As well as a seperate client side one like
// app/builder/builder.client.config
'use client';
import { builder, BuilderComponent } from '@builder.io/react';
import type {BuilderComponentProps} from "@builder.io/react/dist/types/src/components/builder-component.component"
builder.init(BUILDER_API_KEY);
export const SafeBuilderComponent = (props: BuilderComponentProps) => {
return <BuilderComponent {...props} />;
};
Tested it, seems to work only if you make your entire "some-route/page.tsx" with use client, which removes all SSR capabilities.
Also many of the docs, for example this: https://www.builder.io/c/blueprints/product-page-editorial
mention the use of "next/head" which is now discouraged on /app
instead it should use the Metadata api.
I had the same issue, but I swapped @builder.io/react for @builder.io/sdk and it works in a server component. Although your mileage with this 'fix' depends on what you're importing from @builder.io/react.
Describe the bug
The package cannot be used with NextJS 13, when doing just a
builder.init(APIKEY)
returns an errorTo Reproduce Steps to reproduce the behavior:
@builder.io/react
builder.init(APIKEY);
inapp/page.tsx
Expected behavior
I'm just running the init (I'm not even doing anything on react) and is throwing me a React error
Additional context
I've added a codesandbox
I cannot provide an API KEY, and I couldn't generate a new one
This is an example of the error: