Add Support for NextJS 13 - Server Side Rendering

[jonnitg]

Describe the bug

The package cannot be used with NextJS 13, when doing just a builder.init(APIKEY) returns an error

To Reproduce Steps to reproduce the behavior:

1. setup the appDir experimental of NextJS 13
2. install package @builder.io/react
3. setup the builder.init(APIKEY); in app/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

• https://codesandbox.io/p/sandbox/mutable-sunset-vhurgr

I cannot provide an API KEY, and I couldn't generate a new one

This is an example of the error:

error - (sc_server)/node_modules/@emotion/core/dist/emotion-element-c423a2c0.cjs.dev.js (17:45) @ eval
error - TypeError: React.createContext is not a function
    at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/core/dist/emotion-element-c423a2c0.cjs.dev.js:16:47)
    at Object.(sc_server)/./node_modules/@emotion/core/dist/emotion-element-c423a2c0.cjs.dev.js ([my-directory]/.next/server/app/page.js:437:1)
    at __webpack_require__ ([my-directory]/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/core/dist/core.cjs.dev.js:8:22)
    at Object.(sc_server)/./node_modules/@emotion/core/dist/core.cjs.dev.js ([my-directory]/.next/server/app/page.js:415:1)
    at __webpack_require__ ([my-directory]/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/@emotion/core/dist/core.cjs.js:3:22)
    at Object.(sc_server)/./node_modules/@emotion/core/dist/core.cjs.js ([my-directory]/.next/server/app/page.js:426:1)
    at __webpack_require__ ([my-directory]/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/@builder.io/react/dist/builder-react.cjs.js:5:126) {
  type: 'TypeError',
  page: '/'
}

[K-Kit]

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} />;
};

[artmadeit]

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.

[jimboboliver]

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.