Hello, I have been running into an error frequently when attempting to access a section model in the visual editor. It is for a header, which I can see successfully rendered on the visual editor for my other pages. The content of the header won’t load when I access it using the editing url, it just renders a popup “We are having trouble connecting to your site. Your site might be responding slower than usual, or you might need to check on your integration” with some troubleshooting steps.
I have gone through the troubleshooting steps, but I still receive this error. Sometimes I will get an option to load the fallback editor, which does render the expected model, but this only happens occasionally.
If I don’t get the option to render the fallback editor, this is the actual error that I see on the iframe:
It is a Lambda 503 error, which I believe is associated with the editing url defined in the model. I assumed I could use any endpoint for this url, and I’m running it through localhost.
This is the implementation in my codebase for this component:
import React from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';
import { builder, BuilderComponent } from '@builder.io/react';
builder.init('myApiKey');
export function Header() {
return <>
<Router>
<Link to="/">Home</Link>
<br></br>
<Link to="display-page">Display Page</Link>
</Router>
<BuilderComponent
model="header"
/>
</>
}
Should I be using this header as a page model in builder vs a section model? What is the protocol for creating and then accessing the editing url in the builder visual editor when I’m working on a section model?
Thank you so much for your help!