CODEWITHSUNDEEP
solid-jshydrationsolid-start
Gabriel Cséfalvay
Gabriel Cséfalvay

Reputation: 539

I'm getting a "template2 is not a function" error in SolidStart

I have an issue in SolidStart that this one conditional <Show> element is creating this not-too-specific error message, but all the other <Show>s are fine.

Error: template2 is not a function

Here is a minimalist sample code:

const location = useLocation();
const isStateData = () => location.state?.myStateData;

return (
  <Show when={isStateData()}>
    State available
  </Show>
);

I don't understand this issue, what's probably related to me being a solid beginner.

Upvotes: 0

Views: 36

Answers (1)

Gabriel Cs&#233;falvay
Gabriel Cs&#233;falvay

Reputation: 539

Ok, so I figured out this issue. It's related to hydration. For hydration to work, the render on the server and the initial render on the client have to be exactly the same.

This means that no conditions are allowed to affect the render.

Here is the fixed code for the example from the question:

const location = useLocation();
const [isStateData, setIsStateData] = createSignal(null);

createEffect(()=>{
  setIsStateData( location.state?.myStateData );
});

return (
  <Show when={isStateData()}>
    State available
  </Show>
);

If it's reactive, use createEffect(), otherwise just use onMount(). Both of these will ensure that any changes to the page will occur only after hydration of the rendered DOM.

The right order is:

  1. Render
  2. Hydration
  3. Everything else - any interactions or changes

Upvotes: 0

Related Questions