Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error when using components in if blazor server side

See original GitHub issue

Is there an existing issue for this?

I have searched the existing issues

Describe the bug

is if: not if, work:

Code:

<Row>
    <Col Class="basis-8/12">
        <Card>
            <Title>Test</Title>
            <Content></Content>
        </Card>
    </Col>
    <Col Class="basis-4/12">
        test
    </Col>
</Row>

Row.razor

<div class="@Class flex flex-wrap md:mx-2">
    @ChildContent
</div>

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

    [Parameter]
    public string? Class { get; set; }
}

Col.razor

<div class="@Class @_sm @_md @_lg @_xl @_xxl basis-full mb-3 md:px-2">
    @ChildContent
</div>

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

    [Parameter]
    public string? Class { get; set; }

    private string _sm = string.Empty;
    private string _md = string.Empty;
    private string _lg = string.Empty;
    private string _xl = string.Empty;
    private string _xxl = string.Empty;

    [Parameter]
    public string? sm { set => _sm = $"sm:{value}"; }

    [Parameter]
    public string? md { set => _md = $"md:{value}"; }

    [Parameter]
    public string? lg { set => _lg = $"lg:{value}"; }

    [Parameter]
    public string? xl { set => _xl = $"xl:{value}"; }

    [Parameter]
    public string? xxl { set => _xxl = $"2xl:{value}"; }
}

Card.razor

<div class="@Class mb-2 bg-slate-600 dark:bg-zinc-800 text-white dark:text-gray-400">
    <div class="mx-2 md:mx-5 py-3">

        @* Title *@
        @if (Title is not null)
        {
            <div class="my-2 justify-center">
                <p class="text-3xl ">@Title</p>
            </div>
        }

        @* Content *@
        <div>
            @Content
        </div>

    </div>
</div>

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

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

    [Parameter]
    public string? Class { get; set; }
}

Error: