Hydration mismatch when trying to reference slot element outside of JSX

My component has two optional props

leadingElement

leadingElement

and

trailingElement

trailingElement

that expect a JSX element or fragment. I insert them like this:

{local.leadingElement}
// ...
{local.trailingElement}

{local.leadingElement}
// ...
{local.trailingElement}

When I try to reference these props outside of the JSX return, it results in a hydration mismatch:

// This line causes hydration mismatch.
const hasElementsOnAnySide = local.leadingElement || local.trailingElement;

// This line causes hydration mismatch.
const hasElementsOnAnySide = local.leadingElement || local.trailingElement;

Component works fine without this line. Code: https://pastebin.com/AjVSuhQM

Pastebin

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

SolidJS•2y ago•

24 replies