Unclear error message when nesting Counter Control inside html paragraph tags

htmlsplash commented 8 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the bug

Blazor .net 8, SSR project as default.

When you place the Counter component inside the html p tag, you will get the following exception:

blazor.web.js:1 Uncaught Error: Found malformed component comment at Blazor:{"type":"server","prerenderId":"d78c1b969b5a4f0b97a2f182d189d822","key":{"locationHash":"201FE61663F0F29A3282826AFE151DBE7E9AE7D8DE326FD522C7EAF3415AAE26:8","formattedComponentKey":"1"},"sequence":0,"descriptor":"CfDJ8AWdFPKemF1LvFLRlJ/JxoYui6cratQf5GN37sLmRrBxTIc76mIsYRiSVx34rD5UnMWRhCi901bdhLYSBR8PG9qaC4qzFDq/NzS8TvFnkIhcUpaW5z8RBEpjhuPxgpFErdy5tC/yTJE9wXSDoWPJjU0VYBAuW2ioloJGUGHkP/TYe3B5P7GD3zZ979HCErSo4WcIvQWHYhihwUObnE2mBYSxXGY\u002B4XGosPqd4DLik7ILsOLXFZ13GVdU0YCpkXyDvyIpqejXp/D1b\u002B5jfsVii5xYpSEAiyYZUju8e1lfNdj7SumX6frCYu8PW0c6ercqwipkqrUPT6CbnvAc62vrhqA0M6mxpPUY1q4AiS9b9kAzlBZpUQjAmT73BaslZ\u002B1ONHDHf/P8saxmLEm6suQ8loeVc\u002BmfITKWt6YyOJb\u002BEv4KbSjFluR4qMQ9jqGNUXBVVnVkKr3t/1smwHcAfP0IIs0gipc\u002BDUEe5PI45fo4HyB\u002BFY5r0EwQXsi//a7z8lyHa5eFAoeZsr3RGcMIxwq1MQ4hqx75xo\u002B14qMLTFvP7lbdOY/fX6bD1EHHNNi5J1RA8c3d9hbNRxFjHVgJ9SDghliVCKcDW4CWt4UIdypGqxal4e67lZGpdMILx6MR3XmNvhksdKMkTdIRq5gCO7aZPIPREO3Kyw3Z5BJofyiAgKxUmr2ZXkAqwYlABQWXGg6Xd7vN\u002B8hA4JJ7Ik48ydWjelNoQGbqLheN1owRThL5/q7KH/U6k\u002BSaosiv2lmjZrGLv0sxXWrHAiY71qgyCe5JJq8egUFhCbmE3lZvOfbbNMFHwEyM9QnOTrJWNp/nttlF6o1Dqcxe0xrQcsbf\u002BzHplCnHV0YMNOk9/v3g20Wu55CRiFvKqmirxro8/84jw8qfGqWLEVx0StEmLvxyBLR/TioAHqurGfzFccQOSP0DsrBg7\u002B7V8kMf\u002Bs6a1n5ge3POZT2sDsqGwNY1E8uHrxtimWzxKa\u002B2teqOnR7bPfyzO7Dp7R9TC8ywj7EbuxxelQQcLY3yPwI/BHGbyEcYjc0Zy300CGde/J4lNMK6Gb02Q0o481t\u002BEyLN\u002BLqukucRDFOYIWILWF6ST0df3SuSbvrIcPJyszWoSFUvjr5IOKVnfrvMh4TgOFmmzdln5uaXpFX3dvZ\u002BOBS1v0Z7wi0BuoU51O050bLPgcd3sCLc8mtpKnthV/n9uh9TNtaFV1qR0cJv4RomoPBtD5elCCGfb7r1qkmNx2jUExXsP41euyR86B/O"}

Code Example that produces this exception:

<p> <Counter @rendermode="InteractiveServer" @key="1" User="CurrentUser"></Counter></p>

But this is okay

<p /> <Counter @rendermode="InteractiveServer" @key="1" User="CurrentUser"></Counter>

Also this okay:

<Counter @rendermode="InteractiveServer" @key="1" User="CurrentUser"></Counter>

This is also fine:

<div> <Counter @rendermode="InteractiveServer" @key="1" User="CurrentUser"></Counter></div>

Clearly, something is going on. I should be able to place components inside paragraph tags.

Other findings:

I stripped the Counter's component content to just displaying h1 tag with some text and that made no difference
Removing "@rendermode" attribute from the Counter component resolves that problem ... So this issues is obviously with server side DOM updates/rendering.

I hope this helps

Expected Behavior

No response

Steps To Reproduce

No response

Exceptions (if any)

Exception is in the problem description.

.NET Version

.net 8 Blazor

Anything else?

No response

mkArtakMSFT commented 8 months ago

Thanks for contacting us. What's happening in this case, is that the html that is being rendered doesn't comply with the HTML specification, and the browser tries to correct it by reordering the tags being rendered. That, in turn results in the component markers not being found, causing this error. We will use this issue to improve the error message, so that it's clear that the markup the developer used should be improved. For example, please note that HTML doesn't allow <div> to be placed inside a <p>, so make sure you don't do that.

htmlsplash commented 8 months ago

Yes, that would be helpful. It was not that easy to track down this bug, and this was on a simple page with relatively few elements.

dotnet / aspnetcore