Blazor tabs not working - Getting WASM error: RuntimeError: function signature mismatch

Question

So, I have been following this tutorial for making a tabbed component:

https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/

I have the following pieces of code:

Tabs:

<CascadingValue Value="this" IsFixed="true">
    <div class="">
        @foreach(var panel in Panels)
        {
            if(panel.TabName == ActiveTab.TabName)
            {
                <Button Type="ButtonTypes.Contained" Color="ButtonColors.Primary" OnClick="() => { ActivatePanel(panel); }">@panel.TabName</Button>
            }
            else
            {
                <Button Type="ButtonTypes.Outlined" Color="ButtonColors.Primary" OnClick="() => { ActivatePanel(panel); }">@panel.TabName</Button>
            }
        }
    </div>

    <div class="bg-white rounded-lg shadow-lg border @CssClass">
        @ChildContent
    </div>
</CascadingValue>



@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string CssClass { get; set; } = "";

    public TabPanel ActiveTab { get; set; } = new TabPanel();

    private List<TabPanel> Panels { get; set; } = new List<TabPanel>();

    internal void AddPage(TabPanel tabPage)
    {
        Panels.Add(tabPage);
        if (Panels.Count == 1)
            ActiveTab = tabPage;
        StateHasChanged();
    }


    void ActivatePanel(TabPanel page)
    {
        ActiveTab = page;
    }
}

Panel:

@if(Parent.ActiveTab == this)
{
    @ChildContent
}


@code {

    [CascadingParameter]
    private Tabs Parent { get; set; } = new Tabs();

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string CssClass { get; set; } = "";

    [Parameter]
    public string TabName { get; set; } = "";

    protected override void OnInitialized()
    {
        if(Parent == null)
            throw new ArgumentNullException(nameof(Parent), "TabPanel must exist within a Tabs component");
        base.OnInitialized();
        Parent.AddPage(this);
    }

}

And it's being used this way:

<Tabs>
    <TabPanel TabName="Tab One">
        <Header HeaderType="HeaderTypes.H3">One</Header>
    </TabPanel>
    <TabPanel TabName="Tab Two">
        <Header HeaderType="HeaderTypes.H3">Two</Header>
    </TabPanel>
    <TabPanel TabName="Tab Three">
        <Header HeaderType="HeaderTypes.H3">Three</Header>
    </TabPanel>
</Tabs>

As I described in the title, I am getting this wasm error:

Does anyone know why this happens or how could I debug it?

Answer 1

I cannot explain the precise reason for this particular error, but this line is causing the problem:

public TabPanel ActiveTab { get; set; } = new TabPanel();

You shouldn't be creating components by invoking a constructor as you are doing here. Furthermore, this line doesn't accomplish anything useful, as you are already initializing ActiveTab to a non-null value when you add the first tab.

Simply change this line to:

public TabPanel ActiveTab { get; set; }

And your problem will go away.