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
Usage inside the page
Error
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>
}
<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>
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-11 Reply
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")!} />
);
}