Builder script randomly duplicates classes

ElijahModestov · December 2, 2021, 6:12pm

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
2796e1ab488f4a1a9d29ea5cc95ca0a0

Detailed steps to reproduce the bug
Sometimes Builder script randomly deletes all classes of the element and duplicates classes from the previous element on the page. So some elements randomly loose all styles and gain wrong ones.

Screenshots or video link
Here are some screenshots of the problem:

Page in the builder editor (builder preview is also fine) -
page Builder.io: Drag and drop page builder and CMS,
link - Loom | Free Screen & Video Recording Software
Page on our website (in this case it is bugged only for mobiles, but it happens not the first time and I solved it only hardcoding with custom JS) -
page Easy-access investing | Vivid Slovenia,
link Loom | Free Screen & Video Recording Software.
Html just after the page was loaded -
Loom | Free Screen & Video Recording Software.
Html after classes are messed up -
Loom | Free Screen & Video Recording Software (selected and next element have classes css-14v1c1).

Code stack you are integrating Builder with
ReactJS, Typescript, Tramvai

TimG · December 3, 2021, 12:43am

@ElijahModestov Could you provide any more info or steps to recreate it? I am not able to replicate on my end…is this happening within the editor, preview or live page? If you clear your cache does it continue to happen?

If you could share any further steps or screen shots or ideally a recording (we like using Loom) to help look into it further, I’d much appreciate it!

ElijahModestov · December 3, 2021, 8:47am

Hi Tim!
Thanks a lot for a quick response.
Here is my video description of how you can see this bug. I hope it helps.

It happens only on the live page somehow (cache cleaning doesn’t help). If it is not enough I can try to provide even more details

ElijahModestov · December 7, 2021, 3:21pm

Hi Tim, do you have any updates on this issue? I’ve managed to fix it by totally deleting some blocks and creating them from scratch, but it is a huge time-eating wormhole.

TimG · December 7, 2021, 10:11pm

@ElijahModestov I have raised this with our Dev team…we are looking into it and can try to get back to you if we find anything. I have been looking around but dont see anything obviously causing the issue from within Builder.

I did notice that the responsive design doesn’t work in Chrome until you refresh the page, or in Safari if I shrink the window, there seems to be something that prevents the page from responding correctly.

I am wondering if there is something strange coming from a CSS or JS framework on your site? I am not familiar with Tramvai framework you mentioned…is it possible to provide a minimal reproduction that shows this issue happening in a non Tramvai project? That would help us rule that out as the issue

TimG · December 10, 2021, 12:45am

@ElijahModestov I did a little more research and found something similar in certain cases, is it possible you are using the noWrap option on your custom components?

If you are using noWrap, you must be sure to pass {…props.attributes} to the component, as seen in the link above. Or if you set it to false it could clear up the issue as well. Try that out and let me know if that helps

github.com

BuilderIO/builder/blob/2bd00fbc6e56088c1d8f4fde588cbd4ad8f88470/packages/core/src/builder.class.ts#L492

    
      
          type?: 'angular' | 'webcomponent' | 'react' | 'vue';
          defaultStyles?: { [key: string]: string };
          /**
           * Turn on if your component can accept children. Be sure to use in combination with
           * withChildren(YourComponent) like here
           * github.com/BuilderIO/builder/blob/master/examples/react-design-system/src/components/HeroWithChildren/HeroWithChildren.builder.js#L5
           */
          canHaveChildren?: boolean;
          fragment?: boolean;
          /**
           * Do not wrap a component in a dom element. Be sure to use {...props.attributes} with this option
           * like here github.com/BuilderIO/builder/blob/master/packages/react/src/blocks/forms/Input.tsx#L34
           */
          noWrap?: boolean;
          /**
           * Default children
           */
          defaultChildren?: BuilderElement[];
          defaults?: Partial<BuilderElement>;
          hooks?: { [key: string]: string | Function };
          /**

Topic		Replies	Views
Content Creation Help Bugs	4	769	September 24, 2021
Live editor showing unrelated content for section Bugs	2	450	September 15, 2022
Visual Builder is Broken Bugs	3	351	August 22, 2023
Builder Editor Glitch in Artboard Moade Visual Editor Help visual-editor , nextjs	3	21	November 5, 2024
Builder is duplicating content on supposed different entries/drop zones CMS visual-editor , react , api	1	461	January 11, 2022

Builder script randomly duplicates classes

Related topics