'Found malformed component comment' exception when using custom render tree logic

[assafY]

Describe the bug

I use custom render tree logic to render the entire DOM object, so that I can generate meta tags dynamically for SEO purposes.

My use of custom render tree logic is almost identical to what can be seen here
https://github.com/thewebchameleon/blazor-metatag-example/blob/master/BlazorMetaTags/AppBase.cs

However, this generates the comment with the Blazor render ID right at the beginning of my document, and upon inspection there is an unhandled exception that is thrown:

Uncaught (in promise) Error: Found malformed component comment at Blazor:{"sequence":0,"type":"server","prerenderId":"42d9978a600041668e47c4247db0ca3a","descriptor":"CfDJ8HuNMQSWbOxChVhh3tPgLsvuHRkW\u002B\u002B0VwiTn/SXvoyvsvPECQhaepe9b2d6HfZe3YIUq2/oi7i94mPCCbYXR8ISXoDBR1E8GaBqQfWuri\u002BqwoaquD\u002Bf0FVHUWkmjOuqokXMDmblYHcguLxmvCFciCR8cgCXLLssdEHiY5XwYt\u002B\u002B5StnuAFgWQvQx\u002BTp3hkhHNtuu2TfMmNlwYzwkAc3jdXEoJx5sj3wPOxhhTzdhuRAcpb5XHperMAfndaF0BsWi6mVjmPm\u002BQDCFQYjCm99gLAu5/zoDtRZ3m2Cvje20qzPmQ5ODkUEjpS572Fa2F9j5VZOCXgwPkYgnLQcZcm0IzY2dZhdP9oTTlgjHxn8v//VH"}
    at l (blazor.server.js:15)
    at e (blazor.server.js:15)
    at Object.t.discoverComponents (blazor.server.js:15)
    at blazor.server.js:8
    at blazor.server.js:8
    at Object.next (blazor.server.js:8)
    at blazor.server.js:8
    at new Promise (<anonymous>)
    at r (blazor.server.js:8)
    at E (blazor.server.js:8)

To Reproduce

Creating a project that uses custom render tree logic similar to this repo https://github.com/thewebchameleon/blazor-metatag-example/blob/master/BlazorMetaTags/ will result in this behaviour.

[mkArtakMSFT]

Thanks for contacting us.
It's not clear what you're trying to do here. Will the work represented by this issue cover your scenario: #10450?

@javiercn can you please see whether there is anything else we need to look into here? Thanks!

[assafY]

Yes, it looks like the work for that issue will cover my scenario. The purpose of using custom render tree logic is to include dynamic data generated based on the current URL in the component.

This seems to work as I expect, but then the circuit is terminated with the error posted in my issue. The seems to point to the comment generated by Blazor with the render ID.

[mkArtakMSFT]

Thanks for confirming, @assafY.
Let's wait for @javiercn who will be having a closer look at that error you're seeing.

[assafY]

Thank you @mkArtakMSFT, but I have now figured out the cause of my issue. It seems to have been caused due to trying to render the blazor js script tag as part of my custom render tree. As pointed out in #18050 this is not a good idea.

After removing this line from the BuilderRenderTree method:
builder.AddMarkupContent(5, " <script src='_framework/blazor.server.js'></script>");

And adding the script tag to _Host.cshtml instead, the issue is fixed.