Hydration error

I have used text block from builder basics. By default it renderes tag. But when i update dynamic text it takes

tag by default. This is causing hydration error in react/next app.
Is there any way to remove span tag globally?

Hi @Bindiya!

If you could please share a screenshot or a loom to reproduce this error, will be much appreciated. Also, you may find help at our forum post
Self-closing tags in custom code trigger hydration error in React SDK

Hey Manish,

We have shared details as part of request (3286) in support ticket.

Have attached a screenshot to highlight inappropriate html tag placement.

Builder space link : https://builder.io/content/1ce1962a070747a48bf794d0e544860e


Hi Bindiya!

Currently, there is no feature available within the builder to remove the <span> tag from the Text box input. But you can submit a feature request at Builder.io Ideas.

Now, as a solution, you can definitely use a Custom code block instead of Text Box input. Or you can use javascript to replace the span tag with a div or any other appropriate HTML tag. E.g.

   const allSpanElements = document.querySelectorAll('span.builder-text');
    allSpanElements.forEach((spanElement) => {
      // Here comes the Code that should be executed on every Builder Span Element, e.g.
      var divElement = document.createElement("div"); 
      divElement.innerHTML = spanElement.innerHTML
      spanElement.parentNode.replaceChild(divElement, spanElement);

Let us know if you have any further questions or concerns. Thank you!

1 Like