dotnet
Unclear error message when nesting Counter Control inside html paragraph tags
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
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.
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.