React Code Components Hydration Failures

Developers Code components
1

Hello!

I am having an issue with the new React Code Components that is preventing us from adopting them, but I have not been able to find any information about how to resolve it in the documentation.

Any code component I create has a react hydration error which results in a duplicate element being rendered - one from before hydration and one after, which is functional. The only exceptions are components made purely of phrasing elements like span and b.

The components are being placed inside a Div block, and the post hydration html looks like this:

<div class="div-block-2"><code-island ...>
	<div class="hydrator">
		hydrator
	</div>
	<div class="hydrator">
		hydrator
	</div>
</code-island></div>

Where the entire component is simply <div class="hydrator">hydrator</div> - so there is nothing dynamic that should interfere with hydration or change based on the server/client.

Am I missing something that could be breaking the serverside rendering?

1 Like
2

Hey there!

Vic from the DevRel team here. I chatted with the Code Components team and they’d like a bit more information to investigate. PM’ing you.

All the best,
Vic

2 Likes
3

Solved! If anyone else is experiencing this, make sure that “Minify HTML” is enabled in your site publish advanced settings.

Support was able to help me debug that and sounds like they’re looking into why it works that way but that’s what got it working for me.

1 Like