SolidJSS
SolidJS•2y ago•
1 reply
unused

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>
}



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>



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
Was this page helpful?