Error when using components in if blazor server side

[Alerinos]

Is there an existing issue for this?

• [X] 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:

Błąd (aktywny) RZ1034 Found a malformed 'Col' tag helper. Tag helpers must have a start and end tag or be self closing.

What did I do wrong? I was looking for a solution but unfortunately I can't see it ..

Expected Behavior

No response

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

.net core 7 preview 2

Anything else?

No response

[javiercn]

@Alerinos thanks for contacting us.

Can you provide a minimal repro project as a public github repository so that we can make progress on this issue?

[ghost]

Hi @Alerinos. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[Alerinos]

@javiercn https://github.com/Alerinos/ErrorComponent

[mkArtakMSFT]

Thanks @Alerinos. @jaredpar this looks like a compiler issue. I think it's worth validating the repro provided to confirm that this indeed behaves as stated and take from there.

[coader]

if has Col in code block, will show editor syntax error like above, but compiled and exectued is ok

[Alerinos]

@coader Unfortunately, it is impossible to compile the code with VS.

@jaredpar Can something more be done in this direction?

[Alerinos]

@chsienki Can I ask for help? Unfortunately, many libraries including AntBlazor use this namespace, which causes problems when we want to give a condition.

@mkArtakMSFT I think in .net 8 we should take care of this.

[magierska]

@mkArtakMSFT Is there any update on this issue? For me it happens in some random cases when razor tag is put inside code block: You'll see that exactly the same structure doesn't trigger an error outside code block, but does inside.

It's not only intellisense, it also blocks building for me.

[Alerinos]

@mkArtakMSFT Is there any update on this issue? For me it happens in some random cases when razor tag is put inside code block: You'll see that exactly the same structure doesn't trigger an error outside code block, but does inside.

It's not only intellisense, it also blocks building for me.

Yes, change the name.

Nie naprawią tego szybko

[jjonescz]

This happens when all of the following is true:

• a component is named like a void element, e.g., <Col>, <Link>,
• it is not self-closed (<Link />) but has some content instead (<Link>content</Link>),
• is used inside a code block (e.g., @{ }, @if (...) { }, @foreach (...) {}).

Also reported at https://github.com/dotnet/razor/issues/8460.