Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document'
See original GitHub issueIs there an existing issue for this?
- I have searched the existing issues
Describe the bug
FULL DISCLOSURE I MIGHT BE DOING SOMETHING WRONG
I am trying to wire up StreamRendering for a quick prototype using SSR. When I add the @attribute [StreamRendering(true)] to a RazorComponent that is configured for SSR, I get the following error in the browser dev tools.
blazor.web.js:1 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document'.
at https://localhost:7007/_framework/blazor.web.js:1:839
at https://localhost:7007/_framework/blazor.web.js:1:872
at NodeList.forEach (<anonymous>)
at HTMLSlotElement.<anonymous> (https://localhost:7007/_framework/blazor.web.js:1:278)
content.js:225 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'children')
at content.js:225:42
at content.js:233:7
at content.js:382:5
at content.js:392:3
Expected Behavior
For the component to render before the async tasks complete as described in this blog post
Steps To Reproduce
- Create new web project
dotnet new web -o BlazorSSR
- Configure for SSR (per here
- Create new component called FetchData
- Use Blazor WASM fetch data template
- add wwwroot folder, and json data
- add scoped HttpClient, UseStaticFiles to Program.cs
// Full Program.cs
using BlazorSSR;
using Microsoft.AspNetCore.Components.Endpoints;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddScoped(sp => new HttpClient());
builder.Services.AddRazorComponents();
var app = builder.Build();
app.UseStaticFiles();
app.MapRazorComponents<FetchData>();
app.MapGet("/data", () => new RazorComponentResult<FetchData>());
app.Run();
// Full FetchData.razor
@page "/"
@implements IRazorComponentApplication<FetchData>
@inject HttpClient Http
<!DOCTYPE html>
<html lang="en">
<head>
<title>Weather Forecast</title>
</head>
<body>
<h1>Weather forecast</h1>
@if (forecasts is null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
</body>
</html>
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("https://localhost:7007/data/weather.json");
}
public class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}
- Add additional steps for stream rendering
- Add
<script src="_framework/blazor.web.js" suppress-error="BL9992"></script> - Add
@attribute [StreamRendering(true)]
- Add
// New Fetch Data
@page "/"
@implements IRazorComponentApplication<FetchData>
@inject HttpClient Http
@attribute [StreamRendering(true)]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Weather Forecast</title>
</head>
<body>
<h1>Weather forecast</h1>
@if (forecasts is null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
<script src="_framework/blazor.web.js" suppress-error="BL9992"></script>
</body>
</html>
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("https://localhost:7007/data/weather.json");
}
public class WeatherForecast
{
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}
When you run the page, you initially see the Loading, but than the screen goes blank and you get the error in developer tools.
Exceptions (if any)
Error in Developer Tools
blazor.web.js:1 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document'.
at https://localhost:7007/_framework/blazor.web.js:1:839
at https://localhost:7007/_framework/blazor.web.js:1:872
at NodeList.forEach (<anonymous>)
at HTMLSlotElement.<anonymous> (https://localhost:7007/_framework/blazor.web.js:1:278)
content.js:225 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'children')
at content.js:225:42
at content.js:233:7
at content.js:382:5
at content.js:392:3
.NET Version
8.0.100-preview.4.23260.5
Anything else?
Visual Studio Enterprise 2022 (64-bit) Preview Version 17.7.0 Preview 1.0
dotnet --info
.NET SDK:
Version: 8.0.100-preview.4.23260.5
Commit: 2268e7b15c
Runtime Environment:
OS Name: Windows
OS Version: 10.0.25375
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\8.0.100-preview.4.23260.5\
.NET workloads installed:
There are no installed workloads to display.
Host:
Version: 8.0.0-preview.4.23259.5
Architecture: x64
Commit: 84a3d0e37e
.NET SDKs installed:
6.0.408 [C:\Program Files\dotnet\sdk]
7.0.203 [C:\Program Files\dotnet\sdk]
7.0.400-preview.23225.8 [C:\Program Files\dotnet\sdk]
8.0.100-preview.4.23260.5 [C:\Program Files\dotnet\sdk]
.NET runtimes installed:
Microsoft.AspNetCore.App 6.0.16 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 7.0.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 8.0.0-preview.4.23260.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 6.0.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.16 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 7.0.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 8.0.0-preview.4.23259.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 6.0.16 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 7.0.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 8.0.0-preview.4.23260.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Other architectures found:
x86 [C:\Program Files (x86)\dotnet]
registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]
Environment variables:
Not set
global.json file:
Not found
Learn more:
https://aka.ms/dotnet/info
Download .NET:
https://aka.ms/dotnet/download
Issue Analytics
- State:
- Created 4 months ago
- Comments:12 (10 by maintainers)
Top Results From Across the Web
Failed to execute 'insertBefore' on 'Node': The node before ...
You have to call insertBefore on the parent element of the element you're inserting before. document.body is not the parent, it's far up...
Read more >Failed to execute 'insertBefore' on 'Node': Nodes of type ' ...
Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document' #57985.
Read more >Failed to execute 'insertBefore' on 'Node'
Hi, I'm getting this error message and I cannot figure out why: Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node ......
Read more >Node: insertBefore() method - Web APIs | MDN
The insertBefore() method of the Node interface inserts a node before a reference node as a child of a specified parent node.
Read more >Node: appendChild() method - Web APIs - MDN Web Docs
The appendChild() method of the Node interface adds a node to the end of the list of children of a specified parent node....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This issue is now addressed in https://github.com/dotnet/aspnetcore/pull/48945, though perhaps not in the way originally anticipated. While dealing with this, it became obvious that root components should not allow interactive rendering, because that would make it impossible to place
<script>tags safely anywhere. So the fix to this is to make it a clearer error that only nonroot components can be interactive.@mohaaron Make sure you disable CSS hot reload. It’s a known incompatibility with streaming rendering that we are in process of fixing.