NextJS Prop `className` did not match

Getting the following error when attempting to register a custom component in my codebase:

Warning: Prop `className` did not match. 
Server: "builder-block builder-pixel-2czpttjoqi2 css-1mvsfya" 
Client: "builder-block builder-pixel-1ru9ed2cucu css-1mvsfya"

Seems to be on the Builder pixel image that it adds to the page

How do I solve this?

Hello @rafill,

Thank you for bringing this issue to our attention. We are aware of it and have raised a ticket for our engineering team to investigate and implement a solution. We will keep you updated as we receive more information. Your report is truly appreciated. Thank you!

Hi Manish,

Thanks for the prompt response. It seems as though, no matter what framework I switch to, Builder.io custom components has an issue. It doesn’t seem worth the effort. What can I do to get this working whilst your engineers find a permanent solution?

Hello @rafill,

You can try adding a class name manual for the custom components using the style tab → Advanced

I can’t access the custom component from the visual editor, because it doesn’t register

Hey @manish-sharma, are there any updates on this issue?
We have the exact same problem and the CSS classes doesn’t seem to affect the pixel at all

This is a breaking bug for us because it forces every of our pages to be client side rendered because of Next.js hydration issue. Please let us know how we can fix it

This issue can likely be solved by updating our SDK to the latest version.

npm i @builder.io/react@latest

npm i @builder.io/sdk@latest