It looks like the issue you’re facing is that you’re overriding the Core:Button component, but the props such as children or buttonText are not being passed as expected. This can happen if you’re not properly binding or extracting the props when overriding the component, especially when using the Builder SDK.
Here’s a debug checklist and potential fixes:
1. Check the Props in BuilderButton Component
The issue could be related to how you’re destructuring props. You should ensure you’re accessing all the necessary props, including children and any custom props.
Update the BuilderButton component to ensure you’re logging the props and accessing children correctly:
export const BuilderButton = ({ attributes, children, ...props }) => {
const { key, ...attributesWithoutKey } = attributes;
// Log props to see if they are passed correctly
console.log("Props:", props);
console.log("Children:", children);
return <Button {...attributesWithoutKey} {...props}>{children}</Button>;
};
children will be passed as a prop automatically, so ensure you’re passing it to the Button component.- The
console.log statements will help you debug if children or other props are missing.
2. Ensure Proper Component Registration
When you dynamically import the BuilderButton and override Core:Button, ensure the component is properly registered and that Builder.io recognizes it. Based on your code snippet, this looks correct, but double-check the component registration:
{
component: dynamic(() => import("../../components/Button/Button").then((mod) => mod.BuilderButton)),
name: "Core:Button",
...buttonConfig,
canHaveChildren: true,
}
Make sure the name in the component registration matches the exact name used in Builder.io’s schema ("Core:Button").
3. Check the Inputs Configuration
In your inputs configuration, you’re defining children as a string with a default value of "Button". This is correct, but ensure you don’t have a conflict in the way Builder.io handles custom inputs. If Builder.io isn’t recognizing children, you might need to explicitly tell it to expect children as a special prop in the schema.
inputs: [
{
name: "children",
type: "string",
defaultValue: "Button",
friendlyName: "Text",
required: true,
},
]
If you’re still facing issues, try testing with other props (e.g., buttonText) to see if the issue is specific to children.
4. Use Builder.io’s Built-in Helpers
When overriding components in Builder, sometimes it’s helpful to use the SDK’s built-in helpers to access the props in a more structured way. If needed, you can try using Builder.isEditable or similar methods to debug whether Builder.io is passing the props as expected.
5. Testing Without override
As a test, try commenting out override: true in the configuration to check if it works without overriding the Core:Button. This can help pinpoint if the issue is related to the override process itself or the props being passed.