loucass003
Prerender not working without javascript
Hello i just made my appm using solid start and i want to do prerendering. Everything compiles but when i load the page without javascript i have an empty page still. Is this normal?
Here is my app.config
export default defineConfig({
vite: {
plugins: [],
},
ssr: true,
server: {
static: true,
prerender: {
routes: ["/"],
},
preset: "github-pages",
},
});
export default defineConfig({
vite: {
plugins: [],
},
ssr: true,
server: {
static: true,
prerender: {
routes: ["/"],
},
preset: "github-pages",
},
});
9 replies
Solidstart Hydration error when using show and jsx element
I am moving my project to solidstart and i having an error with this component
Error
After trial and error i have pinpointed the error to this section
When using Show for the prefixIcon i get the current error but if i remove the Show tag (put still use prefix icon) the error is completely gone.
Can someone tell me what am i missing?
interface ArrowButtonProps extends AnchorProps {
prefixIcon?: JSX.Element;
variant?: "primary" | "default";
}
export const ArrowButton: ParentComponent<ArrowButtonProps> = (
initialProps
) => {
const allProps = mergeProps(
{
variant: "default",
} satisfies Partial<ArrowButtonProps>,
initialProps
);
const [props, anchorProps] = splitProps(allProps, [
"prefixIcon",
"variant",
"children",
]);
return (
<A
{...anchorProps}
class={clsx(
"flex items-center sm:gap-5 gap-2 bg-background-60 rounded-2xl p-3 sm:pl-5 sm:pr-10 px-5 hover:cursor-pointer group hover:bg-background-50 opacity-95 transition-colors border",
props.variant === "primary"
? "border-status-success"
: "border-background-30"
)}
>
<Show when={props.prefixIcon}>
<div
class={clsx(
"w-12 justify-center group-hover:fill-status-success fill-white hidden sm:flex"
)}
>
{props.prefixIcon}
</div>
</Show>
<div class="flex flex-col flex-grow">{props.children}</div>
<div class="flex w-9 group-hover:translate-x-5 transition-transform duration-200">
<ArrowIcon
class="fill-background-10"
size={30}
direction="right"
></ArrowIcon>
</div>
</A>
);
};
interface ArrowButtonProps extends AnchorProps {
prefixIcon?: JSX.Element;
variant?: "primary" | "default";
}
export const ArrowButton: ParentComponent<ArrowButtonProps> = (
initialProps
) => {
const allProps = mergeProps(
{
variant: "default",
} satisfies Partial<ArrowButtonProps>,
initialProps
);
const [props, anchorProps] = splitProps(allProps, [
"prefixIcon",
"variant",
"children",
]);
return (
<A
{...anchorProps}
class={clsx(
"flex items-center sm:gap-5 gap-2 bg-background-60 rounded-2xl p-3 sm:pl-5 sm:pr-10 px-5 hover:cursor-pointer group hover:bg-background-50 opacity-95 transition-colors border",
props.variant === "primary"
? "border-status-success"
: "border-background-30"
)}
>
<Show when={props.prefixIcon}>
<div
class={clsx(
"w-12 justify-center group-hover:fill-status-success fill-white hidden sm:flex"
)}
>
{props.prefixIcon}
</div>
</Show>
<div class="flex flex-col flex-grow">{props.children}</div>
<div class="flex w-9 group-hover:translate-x-5 transition-transform duration-200">
<ArrowIcon
class="fill-background-10"
size={30}
direction="right"
></ArrowIcon>
</div>
</A>
);
};
Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0000000000100000000000840100
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M0 24C0 10.7 10.7 0 24 0L69.5 0c22 0 41.5 12.8 50.6 32l411 0c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3l-288.5 0 5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5L488 336c13.3 0 24 10.7 24 24s-10.7 24-24 24l-288.3 0c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5L24 48C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg>
at getNextElement (chunk-JUDL6WSM.js?v=09a49709:287:13)
at CartIcon.tsx:4:3
at _$$component.location (CartIcon.tsx:9:25)
at @solid-refresh:25:42
at untrack (chunk-47UY6I3P.js?v=09a49709:456:12)
at HMRComp.createMemo.name [as fn] (@solid-refresh:25:28)
at runComputation (chunk-47UY6I3P.js?v=09a49709:721:22)
at updateComputation (chunk-47UY6I3P.js?v=09a49709:703:3)
at createMemo (chunk-47UY6I3P.js?v=09a49709:265:10)
at [solid-refresh]CartIcon (@solid-refresh:22:20)
Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0000000000100000000000840100
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M0 24C0 10.7 10.7 0 24 0L69.5 0c22 0 41.5 12.8 50.6 32l411 0c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3l-288.5 0 5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5L488 336c13.3 0 24 10.7 24 24s-10.7 24-24 24l-288.3 0c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5L24 48C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path></svg>
at getNextElement (chunk-JUDL6WSM.js?v=09a49709:287:13)
at CartIcon.tsx:4:3
at _$$component.location (CartIcon.tsx:9:25)
at @solid-refresh:25:42
at untrack (chunk-47UY6I3P.js?v=09a49709:456:12)
at HMRComp.createMemo.name [as fn] (@solid-refresh:25:28)
at runComputation (chunk-47UY6I3P.js?v=09a49709:721:22)
at updateComputation (chunk-47UY6I3P.js?v=09a49709:703:3)
at createMemo (chunk-47UY6I3P.js?v=09a49709:265:10)
at [solid-refresh]CartIcon (@solid-refresh:22:20)
<Show when={props.prefixIcon}>
<div
class={clsx(
"w-12 justify-center group-hover:fill-status-success fill-white hidden sm:flex"
)}
>
{props.prefixIcon}
</div>
</Show>
<Show when={props.prefixIcon}>
<div
class={clsx(
"w-12 justify-center group-hover:fill-status-success fill-white hidden sm:flex"
)}
>
{props.prefixIcon}
</div>
</Show>
16 replies