Hi Team,
I am trying a build a POC for my organization. We wish to use Builder.io in our new NextJS project.
I am unable to create or publish any page or custom component. I created a simple text entry in my data model and then I tried to bind it with my simple Header custom component and even that failed to load.
I have been facing this issue for the last 2 days and I created another space and still facing the same issue. I even tried hard refresh and the server stops unexpectedly.
Can somebody please help? It is urgent.
Hello @sohail,
Welcome to the Builder.io forum.
I appreciate you sharing the last screenshot, showcasing your successful integration of pages through local development. To better assist you, could you provide additional context regarding the challenges you’re encountering when using custom components and publishing content?
Understanding more about the specific issues you’re facing will enable us to offer more targeted support and guidance.
Hi @manish-sharma
Thank you for an immediate response.
I created a fresh Next.js app using the create command and then added the builder.io react sdk and ran the npm init builder.io@latest command.
Then i created a data model having a simple text entry to be displayed as text as shown in the ss attached.
Now when i tried to use my custom component accepting only a text prop, i registered it using the button provided.
After registering, i simply dragged and dropped my custom component to page i created in builder and then i bind the data entry to it. And when I published it and refresh the preview or refreshed my localhost:3000/demo-page then the local server aborted in terminal without any errors or warning.
I used exception handling to catch the error in the Page which renders the builder components and still could not find the root cause.
I even deployed my app to vercel and tried to refresh it and it showed 404 page not found issue.
To help you understand my issue better, i could lead you to my public code repo on git: sohailkhan361/demo-poc-1
And also nextjs-builder-poc
And this was my another attempt of trying to bind data and create pages.
Within my github account you will find the most recent demo project i tried creating and bind more data to my ProductView and ProductGrid collection custom components and that failed so i tried creating a fresh one with a simple text entry as prop but unfortunately that doesn’t seem to be working.
I actually wish to completely understand and learn to register and bind my custom components to the data model entries so that it is easier for the naive users to create pages easily and deploy them.
Hello @sohail,
We are able to integrate the builder using your GitHub repo successfully. For the data binding issue of the product-list model, would you be able to share your Builder Public API key?
hi @manish-sharma
This is my public api key: c7c102df613943ddb9642a9636ce10cc
I have added a custom component to my repo demo-poc-1
The component is ProductGrid:
'use client'
import Image from 'next/image';
import React from 'react';
import { BuilderElement, BuilderComponent, builder } from '@builder.io/react';
type Product = {
product: {
name: string;
description?: string;
author: string;
salesrank: number;
image: string;
releaseDate: string;
};
};
type ProductsGridProps = {
products: (Product | BuilderElement)[];
};
const ProductsGrid: React.FC<ProductsGridProps> = ({ products = []}) => {
console.log('Received products:', products);
return (
<div className='grid grid-cols-3 w-full'>
{products.map((product, index) => (
<div key={index} className='flex flex-col justify-center p-2 m-2'>
{isProduct(product) ? (
<div className='flex flex-col shadow-md rounded-lg'>
<h1 className='font-bold flex justify-center items-center p-2'>
{product.product.name}
</h1>
<div className='flex justify-center items-center p-1'>
<Image
height={100}
width={200}
alt='product Cover'
src={product.product.image}
/>
</div>
<h4 className='text-sm p-4 text-center'>
By: {product.product.author}
</h4>
</div>
) : (
<BuilderComponent content={product} model='products-list'/>
)}
</div>
))}
</div>
);
};
// Helper function to check if an object is of type Product
function isProduct(obj: any): obj is Product {
return 'product' in obj && typeof obj.product === 'object';
}
export default ProductsGrid;
Inside Builder-registry:
Builder.registerComponent(ProductsGrid, {
name: 'ProductsGrid',
inputs: [
{
name: 'products',
type: 'list',
subFields: [
{
name: 'name',
type: 'string',
defaultValue: 'Default Title'
},
{
name: 'description',
type: 'string',
defaultValue: 'Default Description'
},
{
name: 'author',
type: 'string',
defaultValue: 'Default Author'
},
{
name: 'salesrank',
type: 'number',
defaultValue: 999
},
{
name: 'image',
type: 'string',
defaultValue: 'https://podiumaudio.com/wp-content/uploads/2022/09/Book-Cover-default-768x768.jpeg'
},
{
name: 'releaseDate',
type: 'string',
},
],
},
],
});
Also I am seeing preview load error very often
model id: products-list
ca189544e24a458e9161f1087c1bae11
ALso got the following when I tried to refresh the preview after dropping my ProductsGrid to the Builder Page:
⨯ node_modules/@builder.io/sdk/dist/index.esm.js (2271:18) @ Builder1.flushGetContentQueue
⨯ uncaughtException: Error: Fetching content failed, expected apiKey to be defined instead got: null
at Builder1.flushGetContentQueue (webpack-internal:///(ssr)/./node_modules/@builder.io/sdk/dist/index.esm.js:2332:19)
at Timeout.eval [as _onTimeout] (webpack-internal:///(ssr)/./node_modules/@builder.io/sdk/dist/index.esm.js:2266:28)
at listOnTimeout (node:internal/timers:573:17)
at process.processTimers (node:internal/timers:514:7)
null
✓ Compiled in 114ms (273 modules)
(node:84769) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 close listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
Hello @sohail,
For the data binding of the Product Grid, please refer to the loom video
hi @manish-sharma
Thank you so much for the video. I will try this out myself. 
hi @manish-sharma
I tried to render my List 3 in the ProductsList model in the ProductsGrid Custom component and I got stuck at the tricky part of data binding.
The video clip you shared was helpful to an extent but the data binding part is still I am struggling with.
My task is to show only one list from the ProductsList data model in the ProductsGrid custom component so that I can create duplicates of this page and simply allow naive users to switch the list in the “pick an entry” option to render any other list.
It would be helpful if you could help me understand more about the ‘Item’ suffix and data binding.
Also when I try to change the Page model preview URL to localhost:3000 to try to make and preview changes locally, when I refresh the page in the browser, my server unexpectedly stops with no error or exception thrown.
and it is happening while trying to preview the pages published in Builder
Hello @sohail,
For guidance on connecting data from List 3, you can refer to the following Loom video for a detailed walkthrough: Loom Reference.
Additionally, you may find helpful discussions on this topic in our forum. Check out the thread at this link.
1 Like
Hi @manish-sharma ,
Thank you for the video. This helps a lot. However, as you saw there was some issue with the data binding when we refreshed the page in the preview. Is this something being looked into?
I am also seeing an issue when I try to run my server locally and refresh the page then the local server gets aborted without any error also when I use the Vercel platform to develop and load my pages then the changes take some time and multiple reloads to reflect the latest changes. This seems to be some stability issue with Builder.
Is there any way to resolve this issue? The local server issue is urgent because this is where we will develop our pages locally and then deploy to vercel.
Hello @sohail,
We are currently investigating the data binding issue, but we wanted to clarify that this issue should only be affecting the editor and not the live or draft pages.
Regarding the issue with the localhost server aborting, could you please provide us with a screenshot of the error or a screen recording? This would help us better understand the problem and find a solution more efficiently. Thank you.
Hi @manish-sharma
I have added my screenshots.
It simply stops when I refresh. This issue has been consistent. I simply tried to bind my custom data by passing it as data props in BuilderComponent. The server stopped itself. I even used exception handling but no error was caught.
Hello @sohail,
can you add console.log(“content”, content) on line 22 to check for valid localhost response when it crashes?
Hi @manish-sharma ,
This is the content data.
Greetings @sohail ,
We regret to inform you that we were unable to replicate the issue on our end during local development. We kindly request you to provide us with the version details of the Builder.io: Visual Development Platform SDK and Node.js you are currently using.
Thank you for your cooperation.
Hi @manish-sharma ,
My package.json:
{
“name”: “demo-poc-1”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “next lint”
},
“dependencies”: {
“@builder.io/dev-tools”: “^0.2.6”,
“@builder.io/react”: “^3.1.1”,
“@builder.io/sdk”: “^2.1.1”,
“next”: “14.0.3”,
“react”: “^18”,
“react-dom”: “^18”
},
“devDependencies”: {
“@types/node”: “^20”,
“@types/react”: “^18”,
“@types/react-dom”: “^18”,
“autoprefixer”: “^10.0.1”,
“eslint”: “^8”,
“eslint-config-next”: “14.0.3”,
“postcss”: “^8”,
“tailwindcss”: “^3.3.0”,
“typescript”: “^5”
}
}
Node version: 20.9.0
git: GitHub - sohailkhan361/demo-poc-1: Project created as a POC for tech stack: NextJS, Builder.io POC-1
Hello @sohail,
We were able to replicate the problem on our end. It seems that the crash issue is caused by the version 20 of the node. Could you please try using node 19 or 18 to see if you are still experiencing the same issue?
1 Like
Thank you. It is working fine with version Node version: 18
Could you please provide me an email for a concerned point of contact to further get in touch with and open an official channel of communication for inquiries, feedback, and plans? It would be helpful.
Thanks once again.
Hello @sohail,
You can reach out to support@builder.io for further inquiries, feedback, and plans.
Thanks,
1 Like