SolidJSS
SolidJS•14mo ago•
7 replies
sh03

Hydration Mismatch with `solid-icons`

I have this component:

import { JSX, Show } from "solid-js";

type Props = {
  left?: JSX.Element;
  right?: JSX.Element;
  children: JSX.Element;
};

export const WithIcon = (props: Props) => {
  return (
    <div class="flex items-center justify-center space-x-4">
      <Show when={props.left}>
        <div>{props.left}</div>
      </Show>
      <div>{props.children}</div>
      <Show when={props.right}>
        <div>{props.right}</div>
      </Show>
    </div>
  );
};


and I call it as:

<WithIcon right={<ImCross />}>Something</WithIcon>


where <ImCross /> is a solid-icons icon.

When I do that I see the icon for a split second and then I get:

Hydration Mismatch. Unable to find DOM nodes for hydration key: 0000000010000010000000600021200 <svg stroke-width="0"></svg>

Am I doing something wrong?
Was this page helpful?