Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document' #48574

isaacrlevin · 2023-06-01T18:41:22Z

Is 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

https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-preview-4/#streaming-rendering-with-blazor-components

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)]

// 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

The text was updated successfully, but these errors were encountered:

isaacrlevin · 2023-06-01T18:41:51Z

cc @danroth27 @SteveSandersonMS let me know if I am just doing something dumb here.

danroth27 · 2023-06-01T18:58:03Z

Hi @isaacrlevin. Thanks for reporting this issue! Nothing immediately jumps out to me as being wrong in your code. I have a Blazor SSR sample with streaming rendering setup on the FetchData page that you can also compare with.

isaacrlevin · 2023-06-01T19:04:30Z

Thanks @danroth27 The only main difference is that I just have one component with the full html doc in there, not using CascadingModelBinder and @Body. Are there any known issues with having one component with the whole DOM in it?

danroth27 · 2023-06-01T19:13:40Z

Are there any known issues with having one component with the whole DOM in it?

Not that I was aware of, but I guess there is now 😄

isaacrlevin · 2023-06-01T19:26:08Z

Well let me know if there is any more info you need. I can put what I have in a repo if that helps.

SteveSandersonMS · 2023-06-05T08:13:17Z

Thanks for reporting this.

This problem should go away naturally once we implement #47258 as we'll no longer be trying to rebuild the DOM entirely from the root component node.

danroth27 · 2023-06-05T23:50:24Z

This problem should go away naturally once we implement #47258

@mkArtak @SteveSandersonMS Should we close this as a duplicate of #47258 then?

SteveSandersonMS · 2023-06-06T10:16:35Z

I'd keep it open so that we only close it once we've confirmed in reality that my claim is true.

mohaaron · 2023-06-22T19:53:20Z

I don't want to piggyback on this issue, but I thought that I would comment that I've pulled down Dan Roth's Github repo (https://github.com/danroth27/BlazorSSR) as well as created a new Blazor WebApp from the new template, and have found that the StreamRendering attribute is doing nothing. The whole page loads all at once. Should I create a new issue for this?

SteveSandersonMS · 2023-06-23T08:04:55Z

@mohaaron Make sure you disable CSS hot reload. It's a known incompatibility with streaming rendering that we are in process of fixing.

mohaaron · 2023-06-23T18:36:26Z

@mohaaron Make sure you disable CSS hot reload. It's a known incompatibility with streaming rendering that we are in process of fixing.

That did it, thank you!

SteveSandersonMS · 2023-06-26T12:25:50Z

This issue is now addressed in #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.

ghost added the area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates label Jun 1, 2023

javiercn added area-blazor Includes: Blazor, Razor Components and removed area-mvc Includes: MVC, Actions and Controllers, Localization, CORS, most templates labels Jun 3, 2023

SteveSandersonMS added this to the 8.0-preview7 milestone Jun 5, 2023

SteveSandersonMS self-assigned this Jun 5, 2023

SteveSandersonMS closed this as completed Jun 26, 2023

SteveSandersonMS modified the milestones: 8.0-preview7, 8.0-preview6 Jun 26, 2023

SteveSandersonMS added the Done This issue has been fixed label Jun 26, 2023

ghost locked as resolved and limited conversation to collaborators Jul 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document' #48574

Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document' #48574

isaacrlevin commented Jun 1, 2023

isaacrlevin commented Jun 1, 2023

Uh oh!

danroth27 commented Jun 1, 2023

Uh oh!

isaacrlevin commented Jun 1, 2023

Uh oh!

danroth27 commented Jun 1, 2023

Uh oh!

isaacrlevin commented Jun 1, 2023

Uh oh!

SteveSandersonMS commented Jun 5, 2023

Uh oh!

danroth27 commented Jun 5, 2023

Uh oh!

SteveSandersonMS commented Jun 6, 2023

Uh oh!

mohaaron commented Jun 22, 2023

Uh oh!

SteveSandersonMS commented Jun 23, 2023

Uh oh!

mohaaron commented Jun 23, 2023

Uh oh!

SteveSandersonMS commented Jun 26, 2023 •

edited

Loading

Uh oh!

Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document' #48574

Failed to execute 'insertBefore' on 'Node': Nodes of type '#text' may not be inserted inside nodes of type '#document' #48574

Comments

isaacrlevin commented Jun 1, 2023

Is there an existing issue for this?

Describe the bug

Expected Behavior

Steps To Reproduce

Exceptions (if any)

.NET Version

Anything else?

isaacrlevin commented Jun 1, 2023

Uh oh!

danroth27 commented Jun 1, 2023

Uh oh!

isaacrlevin commented Jun 1, 2023

Uh oh!

danroth27 commented Jun 1, 2023

Uh oh!

isaacrlevin commented Jun 1, 2023

Uh oh!

SteveSandersonMS commented Jun 5, 2023

Uh oh!

danroth27 commented Jun 5, 2023

Uh oh!

SteveSandersonMS commented Jun 6, 2023

Uh oh!

mohaaron commented Jun 22, 2023

Uh oh!

SteveSandersonMS commented Jun 23, 2023

Uh oh!

mohaaron commented Jun 23, 2023

Uh oh!

SteveSandersonMS commented Jun 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SteveSandersonMS commented Jun 26, 2023 •

edited

Loading