Home App Docs Blog Github

Builder script randomly duplicates classes

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:

  1. 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
  2. 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.
  3. Html just after the page was loaded -
    Loom | Free Screen & Video Recording Software.
  4. 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

@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!

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 :slight_smile:

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. :frowning:

@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

@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