S
SolidJS•2mo ago
Pridgey

Another `template2 is not a function` issue

Took a look at the other posts mentioning this issue and can't seem to find anything that helps solve the case. I have a Tab Switch component to display different JSX.Elements with. I'm about 98% sure the error is coming out of this component because when I return a simple <h1>Hej</h1> there is no template2 error. I was originally using @kobalte/core's Tabs component, then decided to try and make my own rough tab switch component. Both have produced this error and I'm not really sure how best to proceed or troubleshoot. So any guidance would be helpful. Here is my component: 
import { createSignal, For, Match, Switch, type JSX } from "solid-js";
import { Button } from "../Button";
import { Flex } from "../Flex";

type TabProps = {
  Content: JSX.Element;
  Default?: boolean;
  Display: string;
  Value: string;
};

type TabSwitchProps = {
  Tabs: TabProps[];
};

export const TabSwitch = (props: TabSwitchProps) => {
  const [currentTab, setCurrentTab] = createSignal<string | undefined>(
    props.Tabs.find((tab) => !!tab.Default)?.Value ?? props.Tabs.at(0)?.Value
  );

  return (
    <Flex Direction="column" Gap="medium">
      {/* Tab buttons */}
      <Flex AlignItems="center" Direction="row" Gap="small">
        <For each={props.Tabs} fallback={<div></div>}>
          {(tab) => (
            <Button OnClick={() => setCurrentTab(tab.Value)}>
              {tab.Display}
            </Button>
          )}
        </For>
      </Flex>
      {/* Tab content */}
      <Switch>
        <For each={props.Tabs}>
          {(tab) => (
            <Match when={tab.Value === currentTab()}>{tab.Content}</Match>
          )}
        </For>
      </Switch>
    </Flex>
  );
};
import { createSignal, For, Match, Switch, type JSX } from "solid-js";
import { Button } from "../Button";
import { Flex } from "../Flex";

type TabProps = {
  Content: JSX.Element;
  Default?: boolean;
  Display: string;
  Value: string;
};

type TabSwitchProps = {
  Tabs: TabProps[];
};

export const TabSwitch = (props: TabSwitchProps) => {
  const [currentTab, setCurrentTab] = createSignal<string | undefined>(
    props.Tabs.find((tab) => !!tab.Default)?.Value ?? props.Tabs.at(0)?.Value
  );

  return (
    <Flex Direction="column" Gap="medium">
      {/* Tab buttons */}
      <Flex AlignItems="center" Direction="row" Gap="small">
        <For each={props.Tabs} fallback={<div></div>}>
          {(tab) => (
            <Button OnClick={() => setCurrentTab(tab.Value)}>
              {tab.Display}
            </Button>
          )}
        </For>
      </Flex>
      {/* Tab content */}
      <Switch>
        <For each={props.Tabs}>
          {(tab) => (
            <Match when={tab.Value === currentTab()}>{tab.Content}</Match>
          )}
        </For>
      </Switch>
    </Flex>
  );
};
And the error is attached in the image.
No description
4 Replies
peerreynders
peerreynders•2mo ago
I suspect 
type TabProps = {
  Content: JSX.Element;
  Default?: boolean;
  Display: string;
  Value: string;
};
type TabProps = {
  Content: JSX.Element;
  Default?: boolean;
  Display: string;
  Value: string;
};
should be 
type TabProps = {
  Content: () => JSX.Element;
  Default?: boolean;
  Display: string;
  Value: string;
};
type TabProps = {
  Content: () => JSX.Element;
  Default?: boolean;
  Display: string;
  Value: string;
};
to work.
Pridgey
PridgeyOP•2mo ago
Oh interesting, I'll give that a try.
peerreynders
peerreynders•2mo ago
Pridgey
PridgeyOP•2mo ago
Can confirm this fixes things. Thank you very much for the help and also for the context around it!

Did you find this page helpful?