Builder content link
Builder public api key
4ed076df4c29494783f454c8c7030b2e
Detailed steps to reproduce the bug
Navigate to the provided Symbol, in the data tab, try to access “Content State”.
The page will fail and indefinitely freeze.
Reload the page, and in content input, remove “Top Right Button > Text” input. Access the “Content State” tab, it now works.
Screenshots or video link
Code stack you are integrating Builder with
Next.JS and React
Hello @martinp,
Welcome to the builder.io forum!
I wanted to update you regarding the issue you’ve reported. We have been able to reproduce the problem and are currently investigating it further. At this time, we can confirm that the root cause does not appear to be related to the Top Right or Top Left button fields.
Rest assured, we will keep you informed as soon as we make any progress.
Best regards,
Hi!
My name is Veronika and I am a Customer Engineer here at Builder.
I’ve had a look at this issue and I believe to have found the root of the cause.
Once I opened the console, I saw a few errors popping up that were coming from your Content Inputs.
Here is what I saw:
I further investigated and it looks like both of these errors are coming from your content input objects. In your first object - called topLeftButton - you have a few fields - since the error we are getting is saying to check Object.i [as prefixHref], I went ahead and found the object that had an href or link.
In the href field that has a type of url, you put that field as required.
Since the field is marked required, once binded, it’s going to look for that required URL. If Builder cannot find the URL, you will get the error cannot read properties of null and because now the URL is required, this prevents the content state from functioning properly.
I would suggest making sure that you’ve set it up correctly through your custom components (doc here) and making sure the JSON structure looks similar to this:
{
"name": "link",
"type": "url",
"required": true,
"helperText": "Enter the full URL here",
"defaultValue": "https://www.example.com"
}
Once required: If set to true, Builder.io will enforce an input for this field, meaning you cannot publish content without providing a valid URL.
In the second console error above -
TypeError: Cannot read properties of null (reading 'host')
at Object.o [as isLocalizableHref]
we can see it’s pointing to check out the Object that has the localization toggle on. Which is the object you have made called topRightButton.
Since you have toggled on Localization - once it cannot find a locale or a locale is not set up properly/ correctly - the error cannot read properties of null will be displayed and content state is not going to function properly. Here is a great doc about locales and how to set everything up before toggling on the locale field.
At the moment, I would suggest turning locale off and making sure you’ve followed all the steps to add locales in Builder and integrate Builder localization in your code..
Once these two things are looked at - content state should open up and you should be able to inspect your JSON.
As you can see - it should work once these two things are handled.
Please let me know if you have any questions or need more clarification - I’m happy to help!
Thank you.
