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>

<h1>Hej</h1>

<h1>Hej</h1>

<h1>Hej</h1> there is no

template2

template2

error.

I was originally using @kobalte/core's

Tabs

Tabs

Tabs

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>
  );
};

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.

Another `template2 is not a function` issue

Similar Threads

Similar Threads

Similar Threads