SolidJSS
SolidJS•2mo ago•
3 replies
cRambo

template2 is not a function - how to solve

Does anyone have a set of best practices or guidelines on how to not run into hydration issues when using Show or other conditional rendering in SolidStart? I've had some sneaky template2 is not a function errors creeping in today and I've finally managed to narrow it down to what piece of code is causing the error but am not really clear on how I can solve the issue.

I'm only getting the template2 error on first page load after a dev server restart - after that it seems to work fine but its really bugging me. My first version of code (which errored about 4 in every 5 first page loads) was:

  <span class="flex items-center gap-2 text-muted-foreground/50">
    <IconClock class="text-xs text-muted-foreground" />
    <Show when={!props.state.loading()} fallback={<LoadingText />}>
      {formatLoadingDuration(props.state.metadata()?.durationMs ?? 0)}
      <span class="text-muted"> | </span>
      <DateFormat datetime={props.state.updatedAt()} />
    </Show>
  </span>


After a bunch of iterating I managed to make it throw the error less (maybe 1 in 4) with this code:

    <Show when={!props.state.loading()} fallback={<LoadingText />}>
      {_ => {
        const duration = props.state.metadata()?.durationMs ?? 0;
        const updatedAt = props.state.updatedAt();
        return (
          <>
            {formatLoadingDuration(duration)}
            <span class="text-muted"> | </span>
            <DateFormat datetime={updatedAt} />
          </>
        );
      }}
    </Show>


Looking for advice or ways to completely solve the issue though if anyone has experience in that area. Thanks!
Was this page helpful?