S
SolidJS•2mo ago
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>
  );
};
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>
<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?
5 Replies
Erik Demaine
Erik Demaine•2mo ago
The issue might be that you use props.left and props.right twice each. You could create your own memo, or use the one from Show: 
<Show when={props.left}>{(left) =>
  <div>{left()}</div>
}</Show>
<Show when={props.left}>{(left) =>
  <div>{left()}</div>
}</Show>
sh03
sh03OP•2mo ago
@Erik Demaine Are there issues with using a prop twice in a component?
Erik Demaine
Erik Demaine•2mo ago
If the prop is a component, it causes that component to render twice See https://docs.solidjs.com/reference/component-apis/children for relevant discussion for props.children, but the same applies for all props that take components I believe I'm not super familiar with hydration debugging but I could imagine rendering twice might confuse the process
sh03
sh03OP•2mo ago
@Erik Demaine That was it. Thanks 🫶
Erik Demaine
Erik Demaine•2mo ago
Yay!!

Did you find this page helpful?