Im using Blazor to build an server side application, I tried adding https://github.com/Blazored/Toast to the project and this did work but for some reason I suddenly start to get this error message:
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit '_uHkRPxSSxkesQYflYcmwBUPkOEPFVb3cJpYUrXjDgA'.
System.AggregateException: One or more errors occurred. (TypeError: Cannot read properties of null (reading 'removeChild'))
---> System.InvalidOperationException: TypeError: Cannot read properties of null (reading 'removeChild')
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
--- End of inner exception stack trace ---
I checked my git changes but I don’t see anything out of the ordinary
My _layout looks like this:
@using Microsoft.AspNetCore.Components.Web
@namespace VTSSupportApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
@* <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> *@
<link href="css/site.css" rel="stylesheet" />
<link href="VTSSupportApp.styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
@RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="_framework/blazor.server.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- Add chart.js reference if Chart components are used in the application. -->
</body>
</html>
my browser is showing this:
I’ve noticed something peculiar during debugging. Occasionally, when I start debugging, there are no error messages, but I’m unable to switch pages using the menu. At other times, without any code changes, error messages appear. Additionally, there are instances where everything works fine simply by stopping and restarting the debugger, without modifying any code.
Update, I rolled back to a previous commit in Git, where I know the code was working, but now I’m encountering the same error even with that version.
After extensive debugging, I identified the issue: I accidentally included the following line twice in my code:
<script src="_framework/blazor.server.js"></script>
This duplication led to some unusual behavior. The problem only became apparent several commits later, as the code occasionally functioned correctly despite the duplication.