blazor headcontent throws exception

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

[severity:Other]
Head content throws exceptions when using global interactive server mode.

Repro:

1. Create a new blazor server app project.

2. For "Interactive Render Mode", select "Server".

3. For "Interactivity Location", select "Global".

4. Add a HeadContent component to the "Home.razor" page. Inside that component, and any valid HTML (doesn't have to be a blazor component).

5. Run the application.

6. From the "Home Page", navigate to the "Counter" page.

7. Click on the browsers "Back" button (using Edge in this case) or click the sidebar nav link for Counter that also has a meta tag

8. Default blazor error message appears.

Here is the error message from the Output or Immediate Window

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: TypeError: Cannot read properties of null (reading 'insertBefore')

System.InvalidOperationException: TypeError: Cannot read properties of null (reading 'insertBefore')
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'XwKDhTBqDdbOIORvnq38ZTsq1zlmyisXYpb55dTgcUg'.

System.AggregateException: One or more errors occurred. (TypeError: Cannot read properties of null (reading 'insertBefore'))
 ---> System.InvalidOperationException: TypeError: Cannot read properties of null (reading 'insertBefore')
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
   --- End of inner exception stack trace ---

Wait for the Microsoft Developer Community Bot to tell us that this is closed, not enough info or this is expected with no further explanation.

---

Original Comments

Feedback Bot on 3/28/2024, 00:45 AM:

(private comment, text removed)

---

Original Solutions

(no solutions)

[TorreyGarland]

A zip file was originally included with the Microsoft Developer Community ticket.

Here is the address to the minimal repo as requested.

https://github.com/TorreyGarland/BlazorApp4

[danroth27]

Hi @TorreyGarland. So far, I'm unable to reproduce this. I cloned your repo, ran the app in VS, clicked on the Counter and then clicked the browser back button, but I don't get any exception. Am I missing a step? Can you share the output of dotnet --info with us so we can check what .NET versions you have?

[TorreyGarland]

The problem is due to the default Visual Studio Blazor App template explicitly setting the render-mode for the App.razor file's HeadOutlet component.

Remove the rendermode attribute on the HeadOutlet component and the problem goes away.

You still may want to dig deeper to find out why this is happening. This error does not occur when using the PageTitle component, presumably due to the lack of the render mode attribute being set.

The documentation for render mode's should be updated to reflect this.

[benjaminsampica]

Seeing this as well. Same reproducing steps.

[vladhorby]

Running into the same issue in .net 8.0.4.

Having a HeadOutlet with the rendermode set in App.razor and setting the PageTitle in a page results in

System.InvalidOperationException: TypeError: Cannot read properties of null (reading 'insertBefore')
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)

Removing the rendermode eliminates the error, but the page title is no longer dynamically updated by the page, of course.

Workaround: Setting a default PageTitle AFTER the HeadOutlet fixes the problem and updates the title as expected:

<HeadOutlet @rendermode="InteractiveServer"></HeadOutlet>
<PageTitle>Default Page Title</PageTitle>