SolidJS•7mo ago

Hydration mismatch (SolidStart)

Hello, I want to extend the default Portal to reduce code duplication. When I try to use the new Portal component it throws me an error on the client side. Component

import { ComponentProps } from "solid-js";
import { Portal } from "solid-js/web";

interface BreadcrumbsPortalProps extends ComponentProps<typeof Portal> {
}

export function BreadcrumbsPortal({ children, ...props }: BreadcrumbsPortalProps) {
  return <Portal {...props} mount={document.getElementById("breadcrumb")!}>
    {children}
  </Portal>
}

import { ComponentProps } from "solid-js";
import { Portal } from "solid-js/web";

interface BreadcrumbsPortalProps extends ComponentProps<typeof Portal> {
}

export function BreadcrumbsPortal({ children, ...props }: BreadcrumbsPortalProps) {
  return <Portal {...props} mount={document.getElementById("breadcrumb")!}>
    {children}
  </Portal>
}

Usage inside the page

<BreadcrumbsPortal>
  <Breadcrumbs>
    <ol class="inline-flex items-center">
      <li class="inline-flex items-center">
        <Breadcrumbs.Link href="/" class="font-medium text-white">
          Home
        </Breadcrumbs.Link>
        <Breadcrumbs.Separator class="inline-block text-gray-300 mx-1"/>
      </li>
      <li class="inline-flex items-center">
        <Breadcrumbs.Link href="/components" class="font-medium text-white">
          Components
        </Breadcrumbs.Link>
        <Breadcrumbs.Separator class="inline-block text-gray-300 mx-1"/>
      </li>
      <li class="inline-flex items-center">
        <Breadcrumbs.Link current class="font-medium text-white">
          Breadcrumbs
        </Breadcrumbs.Link>
      </li>
    </ol>
  </Breadcrumbs>
</BreadcrumbsPortal>

<BreadcrumbsPortal>
  <Breadcrumbs>
    <ol class="inline-flex items-center">
      <li class="inline-flex items-center">
        <Breadcrumbs.Link href="/" class="font-medium text-white">
          Home
        </Breadcrumbs.Link>
        <Breadcrumbs.Separator class="inline-block text-gray-300 mx-1"/>
      </li>
      <li class="inline-flex items-center">
        <Breadcrumbs.Link href="/components" class="font-medium text-white">
          Components
        </Breadcrumbs.Link>
        <Breadcrumbs.Separator class="inline-block text-gray-300 mx-1"/>
      </li>
      <li class="inline-flex items-center">
        <Breadcrumbs.Link current class="font-medium text-white">
          Breadcrumbs
        </Breadcrumbs.Link>
      </li>
    </ol>
  </Breadcrumbs>
</BreadcrumbsPortal>

Error Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-1-0-0-0-2-0-0-0-0-0-0-3-0-0-1

1 Reply

AuretanoOP•7mo ago

Somehow that is working...

export function BreadcrumbsPortal(props: BreadcrumbsPortalProps) {
  return (
    <Portal {...props} mount={window.document.getElementById("breadcrumb")!} />
  );
}

export function BreadcrumbsPortal(props: BreadcrumbsPortalProps) {
  return (
    <Portal {...props} mount={window.document.getElementById("breadcrumb")!} />
  );
}

Gaming

Programming

Hydration mismatch (SolidStart)