Builder content link
Builder.io: Drag and drop page builder and CMS
Builder public api key
fff8e6fa6fbc4f6abf4fb93c03e661f1
Detailed steps to reproduce the bug
go to the above link try paste the instagram grid visual editor and got error of t.data is undefined
Screenshots or video link*
*
Code stack you are integrating Builder with
e.g. NextJS, react, swell
@anupama.sharmaa thanks for reaching out, there could be a few reasons this is. I took a quick look at your page, it looks like you were loading the content correctly in the custom JS+CSS, but since you are using NextJS I think a few changes could help make this run more smoothly.
First, it looks like in the editor you dont have access to context.apiKey, which is causing the data to pull correctly in the preview/live page, but not within the editor. One way to fix this by explicitly setting your apiKey while editing doing something like this:
async function getInstagram(apiKey) {
const response = await fetch(`https://cdn.builder.io/api/v1/instagram/media?apiKey=${apiKey}`)
.then((res) => res.json())
.then((data) => {
state.instagram = data.data;
})
}
if (Builder.isEditing && !state.instagram) {
getInstagram('EXPLICITLY SET YOUR API KEY HERE');
} else {
getInstagram(context.apiKey)
}
Or another way would be to make the above API call inside your app and pass the Instagram data through the data prop on your <BuilderComponent> like this: builder/packages/react at main · BuilderIO/builder · GitHub. This will allow you to edit with the same data as you have on your preview/live site.
Another thing to call out, some of our templates require the widgets package to work correctly with NextJS. I would recommend if you haven’t already, make sure to install our widgets package: builder/packages/widgets at main · BuilderIO/builder · GitHub
From there let me know if you continue to have trouble with the templates and I can investigate further. But with the steps I outlined above, even if our pre-built templates aren’t working, you should be able to import any Instagram data and build your own widget/templates that fit the look you are going for…Try it out and let me know if you have any other questions or issues !