Builder iframe stopped working

Bugs
1

Hi.
We are evaluating builder for our app and everything worked smoothly before this weekend. This week the iframe doesn’t load anymore in builder with the same branch, tried both chrome & FF on localhost/server. No real errors afaik. Any way to debug this more easily?

“@builder.io/react”: “^3.0.14”,

Heres the errors in console:
Uncaught (in promise) Could not evaluate in iframe, doesnt exist!

browser-update.js:6 Mixed Content: The page at ‘https://builder.io/’ was loaded over HTTPS, but requested an insecure script ‘http://browser-update.org/update.min.js’. This request has been blocked; the content must be served over HTTPS.

2

Welcome to the Forum, @tarjei !
We’ll look into this, Could you share the content URL with us to examine this further?

3

Thanks.
Heres one with server preview url: Builder.io: Drag & Drop Headless CMS

Saw one more console error now if that helps:
Failed to load resource: net::ERR_QUIC_PROTOCOL_ERROR
From firestore:
https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?database=projects%2Fbuilder-3b0a2%2Fdatabases%2F(default)&gsessionid=HNXw2vlo1uivWxyrZNoN2XSqKmJIJR8OwV5zRt8AWrk&VER=8&RID=rpc&SID=0hEHrhOXMPX9rQFggV_QHg&CI=1&AID=468&TYPE=xmlhttp&zx=uf6wy75bbtt7&t=1

4

Hi, I am having similar poroblems.
Although I am just trying to get a minimal example working with a Sections Model.

I am using NextJS and in the index.tsx page of the root path I have this code:

builder.init(<MY_API_KEY>);

interface Props {
  content: BuilderContent | null;
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  let url = "/";

  if (params?.page) {
    if (Array.isArray(params.page)) {
      url += params.page.join("/");
    } else {
      url += params.page;
    }
  }

  console.log("url: ", url);

  const content: BuilderContent | null | undefined = (await builder
    .get("card", {
      url,
    })
    .toPromise()) as BuilderContent | null | undefined;

  console.log("content: ", content);

  return {
    props: {
      content: content || null,
    },
    revalidate: 5,
  };
};

const Home: NextPage<Props> = ({ content }) => {
    return <BuilderComponent content={content || undefined} model="card" />;
}

I have also edited the next.config.js as follows:

const withBuilderDevTools = require("@builder.io/dev-tools/next")();

/** @type {import('next').NextConfig} */
const nextConfig = withBuilderDevTools({});

module.exports = nextConfig;

I run the page on localhost with http, I see the builder component rendered in the page when I open it in the browser. I have tried from the troubleshooting guide to, allow unsafe traffic, install the builder plugin, turn on proxy in advanced settings, but I get the same results all the time. This is the console in the Builder.IO visual editor page when trying to connect to the “card” model that has the path of http://localhost:3000/:

builder-errors-1
builder-errors-1648×1258 99.5 KB

builder-errors-2
builder-errors-2657×1224 87.8 KB

I am probably just doing something weird but can not find ant documentation on this error and I am kind of stuck. Please let me know if you recognize the issue or have a solution. Thanks. :blush:

5

Update:

I also tried to host the app with HTTPS on localhost with the same results.

6

Hi @magnus,

In the code snippet you shared, i think is it missing getStaticPaths.
Below is code for reference I have used model: page which is published as the root path.

interface Props {
  content: BuilderContent | null;
}

// Implement getStaticPaths
export const getStaticPaths: GetStaticPaths = async () => {
  const pages = await builder.getAll('page', {
    options: { noTargeting: true }
  });

  const paths = pages.map((page) => ({
    params: { page: [page.data?.url] }, // Assuming your page URL is in an array format
  }));

  return {
    paths,
    fallback: true,
  };
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  let url = "/";

  if (params?.page) {
    if (Array.isArray(params.page)) {
      url += params.page.join("/");
    } else {
      url += params.page;
    }
  }

  console.log("url: ", url);

  const content: BuilderContent | null | undefined = (await builder
    .get("card", {
      url,
    })
    .toPromise()) as BuilderContent | null | undefined;

  console.log("content: ", content);

  return {
    props: {
      content: content || null,
    },
    revalidate: 5,
  };
};

const Home: NextPage<Props> = ({ content }) => {
  return <BuilderComponent content={content || undefined} model="page" />;
}

export default Home;

Also, could you confirm if the card model that you are trying to fetch from builder, if that is type of page and has been published?

I hope this helps, please let me know if you still have any questions.

7

@OmPrakash Did you get a chance to debug the iframe not loading issue?

8

@tarjei
Could you try to change visit Settings → Advanced →enable Proxy Previews. Let me know if that resolves the issue with iframe not loading.

Advanced settings
Advanced settings1622×1272 282 KB

9

That did not help. Also tried with/without the chrome plugin and different browsers.
I had everything up and running without issue, then after last weekend, the iframe refuse to load.

10

Been messing about a little and seems it’s related to our app authentication (MSAL). I have it working again on localhost but still not on server (or know what the issue is). Probably some redirect to auth being blocked or not able to read from localStorage inside the builder iframe.

11

Right, that could be a possibility. Auth within app could be one of the issue point. Great to know you could resolve it for your localhost.