I'm trying to use the BuilderComponent as SSR so I can be able to fetch Shopify Product data from the handle in a Builder Custom Component.

I've seen this issue but I was not able to find any follow-up on this. Is there any update on it?

Shopify/hydrogen#631

When attempting to deploy to Oxygen, the system fails due to the following error:

Cannot read properties of null (reading 'parse')

I've installed a vanilla copy of hydrogen and I started copying over code line by line. When I included the builder client component, the builder.init method causes this error to be thrown. When I run hydrogen in dev mode, it renders just fine. But when it builds for production (as it needs to in order to deploy to Oxygen) the script cannot proceed past that point so it cannot complete a successful deployment.

There is a new version of Hydrogen that uses Remix. I was trying to add the Builder SDK similar to what you do on this repository, but the file structure is different, and I need some help. Are you planning to update this repository to use the most current version of Hydrogen, or can you direct me in the right direction for implementing the Builder SDK correctly?

Hi, after creating the /builder/testing page, I can use the page in the builder customizer, but when I hit publish and go to the URL http://localhost:3000/builder/test, I get a "We lost this page" message.

This is the console log:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

GET streaming SSR     200 1559.16 ms http://localhost:3000/
GET streaming SSR     200 1052.57 ms http://localhost:3000/
GET Server Components 200 204.57 ms  {"pathname":"/collections/freestyle","search":""}
{ data: undefined }
GET streaming SSR     200 208.31 ms  http://localhost:3000/builder/testing?builder.space=c77a2e1d825941f8b48b819ffd78b779&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=9361ad53ee674619bdc2ff0ffa736331&builder.overrides.9361ad53ee674619bdc2ff0ffa736331=9361ad53ee674619bdc2ff0ffa736331&builder.overrides.page:/builder/testing=9361ad53ee674619bdc2ff0ffa736331&builder.frameEditing=page
3:00:49 PM [vite] ✨ new dependencies optimized: @builder.io/react, @builder.io/widgets
3:00:49 PM [vite] ✨ optimized dependencies changed. reloading
3:00:52 PM [vite] page reload node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js
3:00:52 PM [vite] page reload node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite.js (x2)
{ data: undefined }
{ data: undefined }
GET streaming SSR     200 1217.15 ms http://localhost:3000/
GET streaming SSR     200 1238.90 ms http://localhost:3000/builder/testing?builder.space=c77a2e1d825941f8b48b819ffd78b779&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=9361ad53ee674619bdc2ff0ffa736331&builder.overrides.9361ad53ee674619bdc2ff0ffa736331=9361ad53ee674619bdc2ff0ffa736331&builder.overrides.page:/builder/testing=9361ad53ee674619bdc2ff0ffa736331&builder.frameEditing=page
GET streaming SSR     200 1250.24 ms http://localhost:3000/builder/testing?builder.space=c77a2e1d825941f8b48b819ffd78b779&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=9361ad53ee674619bdc2ff0ffa736331&builder.overrides.9361ad53ee674619bdc2ff0ffa736331=9361ad53ee674619bdc2ff0ffa736331&builder.overrides.page:/builder/testing=9361ad53ee674619bdc2ff0ffa736331&builder.frameEditing=page
GET streaming SSR     200 1297.48 ms http://localhost:3000/
{ data: undefined }
GET streaming SSR     200 394.11 ms  http://localhost:3000/builder/testing

I am attempting to deploy our project through Shopify Oxygen with GitHub Actions and am getting the following error from the @builder.io/react package due to the use of eval...

Uncaught Error: EvalError: Code generation from strings disallowed for this context

Here is the full error for completeness:

🛠️ Building the application... 
yarn run v1.22.19
$ shopify hydrogen build
[STARTED] Building client code
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
[TITLE] Built client code
[SUCCESS] Built client code
[STARTED] Building worker code
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
[TITLE] Built worker code
[SUCCESS] Built worker code
Done in 22.01s.
✅ Done in 22.16s.

🚀 Uploading deployment files... 
🛑 InvalidScriptError: retrying will not succeed. The following error must be actioned:

Uncaught Error: EvalError: Code generation from strings disallowed for this context
  at worker.mjs:2203:68269
Error: Process completed with exit code 1.

I have cloned repo from https://github.com/builderio/builder-shopify-hydrogen and after changing hydrogen.config, I was trying to deploy it on hydrogen but is showing some error like this.

https://prnt.sc/tsfGdwYdhsYO

Here is my hydrogen.config file
https://prnt.sc/yC6LkdcY4qWO

https://www.awesomescreenshot.com/image/33275444?key=3c225c21d7a798351967db7be08c021a

Anyone faced issue like this then help me out of this.
Thanks in advance

When running locally, the BuilderComponent from @builder.io/react renders Builder pages extremely slowly and causes the dev server to hang. In our case, this also makes using the Builder content editor pretty difficult.

That said, our project is deployed through Github actions and Oxygen, and the deployed pages load quickly (as expected)

We are using a project based off of the Shopify Hydrogen demo store: https://github.com/Shopify/hydrogen/tree/2023-01/templates/demo-store

The following shows an example use case:

import {builder, BuilderComponent, BuilderContent} from '@builder.io/react';
import {Await, useLoaderData} from '@remix-run/react';
import builderConfig from '../../../builderConfig.json';

builder.init(builderConfig.apiKey);

const BUILDER_MODEL = 'page';

export async function loader() {
  const builderContent = await builder
    .get(BUILDER_MODEL, {
      userAttributes: {
        urlPath: '/',
      },
    })
    .toPromise();

  if (!builderContent) {
    throw new Response('Not found', {status: 404});
  }

  return builderContent;
}

// this gives full compatibility to BuilderContent type and Remix starter
// See: https://github.com/BuilderIO/builder/issues/1387#issuecomment-1397442797
type BuilderContentRemix = Omit<BuilderContent, 'variations' | 'data'>;

export default function Homepage() {
  const builderContent: BuilderContentRemix =
    useLoaderData<BuilderContentRemix>();

  return (
    <Suspense>
      <Await resolve={builderContent}>
        <BuilderComponent content={builderContent} model={BUILDER_MODEL} />
      </Await>
    </Suspense>
  );
}

I have performed all setup steps as per the readme. Running node v16.13.2. When I try to load the page in the builder.io editor or on its own, I receive the error message above. I haven't been able to find any existing information or other cases pertaining to this error.

Please advise. Thanks!

Shopify-Hydrogen has recently released a new version using Remix (https://github.com/Shopify/hydrogen/tree/2023-01/templates/demo-store)

The following error is generated when attempting to use anything from the @builder.io/react sdk in any of the routes. The only place I seem to be able to use @builder.io/react successfully is in the entry.client.tsx file.

Our project was created using the newest template from Shopify-Hydrogen. In my case, this error is generated when using useIsPreviewing() or the BuilderComponent

As an example, the error is generated in the component shown below:

import {BuilderComponent, useIsPreviewing} from '@builder.io/react';
import {BuilderContent} from '@builder.io/sdk';
import {Suspense} from 'react';
import tw from 'tailwind-styled-components';
import {NotFound} from '../NotFound';

export const PaxBuilderPage = ({
  builderContent,
  builderModel,
}: {
  builderContent: Omit<BuilderContent, 'variations' | 'data'>;
  builderModel: string;
}) => {
  const isPreviewingInBuilder = useIsPreviewing();

  if (!builderContent && !isPreviewingInBuilder) {
    return <NotFound />;
  }

  return (
    <Suspense>
      <BuilderContentContainer>
        <BuilderComponent content={builderContent} model={builderModel} />
      </BuilderContentContainer>
    </Suspense>
  );
};

const BuilderContentContainer = tw.div`
  flex
  h-fit
  flex-col
`;

The above PaxBuilderPage component is being used in our site's Homepage (route = '/') as shown below. That said, the same error will still occur when the BuilderComponent is imported from @builder.io/react directly into the Homepage

import {builder, BuilderContent} from '@builder.io/sdk';
import {Await, useLoaderData} from '@remix-run/react';
import builderConfig from '../../../builderConfig.json';
import {PaxBuilderPage} from '../../components/builder/PaxBuilderPage';

builder.init(builderConfig.apiKey);

const BUILDER_MODEL = 'page';

export async function loader() {
  const builderContent = await builder
    .get(BUILDER_MODEL, {
      userAttributes: {
        urlPath: '/',
      },
    })
    .toPromise();

  if (!builderContent) {
    throw new Response('Not found', {status: 404});
  }

  return builderContent;
}

// this gives full compatibility to BuilderContent type and Remix starter
// See: https://github.com/BuilderIO/builder/issues/1387#issuecomment-1397442797
type BuilderContentRemix = Omit<BuilderContent, 'variations' | 'data'>;

export default function Homepage() {
  const builderContent: BuilderContentRemix =
    useLoaderData<BuilderContentRemix>();

  return (
    <Await resolve={builderContent}>
      <PaxBuilderPage
        builderContent={builderContent}
        builderModel={BUILDER_MODEL}
      />
    </Await>
  );
}

Builder is not working on other pages other than the /builder folder. How do we fix this?

Builder.io only works on the builder/ folder, so any pages out side of this folder would not work, unable to edit normal pages such as /pages/about us or homepage as well.

How would I fix this or what code would I need to input to [handle].server.tsx ? I cant publish or edit page as the page shows 404 for new pages made, or it will show the page for the pages on shopify but unable to edit them,

Any help is appreciated.