Page shows up fine on localhost or when deployed but not in the Visual Editor

[naren]

@manish-sharma

This sounds similar to other problems (but also not quite the same) so perhaps this is easy to shed light on.

I am using Next.js 14.0.

The following works correctly on http://localhost:3000 or on a deployed site but doesn’t work in the Visual editor.

Basically I have a “page type” field on my Page model and based on it I am switching content (layouts). Again everything works correctly when I view a live page or a deployed page but not inside the editor.

My src/app/[[…page]]]/page.tsx looks like:

export default async function Page(props: PageProps) {
  const builderModelName = 'page';

  const content = await builder
    .get(builderModelName, {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: '/' + (props?.params?.page?.join('/') || ''),
      },
    })
    // Convert the result to a promise
    .toPromise();

  console.log('Page URL:', content?.data?.urlPath);
  console.log('Page type:', content?.data?.pageType);
  console.log(content?.data?.pageType);
  
  let Layout;
  if (content?.data?.pageType === 'blog') {
    Layout = BlogLayout;
  } else {
    Layout = RegularLayout;
  }

  return (
    <Layout>
      <RenderBuilderContent 
        content={content} 
        model={builderModelName} 
      />
    </Layout>
  );

content?.data?.pageType always shows up empty inside the Visual Editor , content?.data?.urlPath reverts to “/” (but both work fine on localhost or when deployed).

Any ideas?

[naren]

My settings for this pageType field look like:

[Fernando]

Hi Naren​,

Thank you for contacting Builder.io Support! I look forward to helping you with your request.

While I start looking into this, feel free to share any additional information you think might be relevant. Your input is important to helping ensure that I understand and respond to your concerns effectively.

Thanks,

[naren]

Thanks @Fernando. Also tried adding the below two lines to the builder call, didn’t change the outcome:

  const content = await builder
    .get(builderModelName, {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: '/' + (props?.params?.page?.join('/') || ''),
      },
      cachebust: true,
      cacheSeconds: 10
    })
    // Convert the result to a promise
    .toPromise();

[Fernando]

Hi Naren,

Could you share your Public API key?

Here is the documentation on how to get the Public API key.

If you have more than 1 space, please share the space too.

Thank you,

[naren]

Sure:
123193a0c3724aaa903ee95fc42add32

[naren]

I guess I might not have been clear in my earlier messages - a page is showing up all right in the Visual Editor but with the wrong layout. The Layout is always RegularLayout whereas it should be BlogLayout for some pages (and this works on localhost/deployed versions). So this is not a problem of browser blocking the visual editor etc.

[naren]

More debugging: when I try to print the params object, I get something like:

{
  params: {},
  searchParams: {
    'builder.space': '123193a0c3724aaa903ee95fc42add32',
    'builder.user.permissions': 'read,create,publish,editCode,editDesigns,admin,editLayouts,editLayers',
    'builder.user.role.name': 'Admin',
    'builder.user.role.id': 'admin',
    'builder.cachebust': 'true',
    'builder.preview': 'page',
    'builder.noCache': 'true',
    'builder.allowTextEdit': 'true',
    __builder_editing__: 'true',
    'builder.overrides.page': '5c08477c37fd43d7a773c51ef9f3b23b',
    'builder.overrides.5c08477c37fd43d7a773c51ef9f3b23b': '5c08477c37fd43d7a773c51ef9f3b23b',
    'builder.overrides.page:/': '5c08477c37fd43d7a773c51ef9f3b23b',
    'builder.frameEditing': 'page'
  }
}

So essentially, the params object is empty and thus builder.io visual environment doesn’t give access to the same routing parameters. The search parameters which are typically not exposed to the user are doing all the work?

[manish-sharma]

@naren

123193a0c3724aaa903ee95fc42add32

Hello @naren,

Could you please help us with the deployment URL? Alternatively, could you check the network requests while in the visual editor and let us know the response header HAR file? Also, please check the browser devtool console to see if there are any errors.

[naren]

Hi @manish-sharma

Sending you the details via support@builder.io.