Fluent Web App Templates Version 4.11.0 using Auto mode template causes Weather component to fail with ERR_HTTP2_PROTOCOL_ERROR

[marqdouj]

🐛 Bug Report

When creating a new Fluent Web App using the 4.11.0 templates and navigating to the Weather component the JS fails in the browsers with ERR_HTTP2_PROTOCOL_ERROR

NOTE: works fine using the 4.10.4 templates.

💻 Repro or Code Sample

1. Open VS 2022 (Normal or Preview)
2. Create a new project using Auto interactive mode.
3. Run project and select Weather.

🤔 Expected Behavior

The weather component runs fine using Server interactive mode template.
I expect the same when using Auto interactive mode template.

😯 Current Behavior

Error in browser console/IDE: failed to load resource net::ERR_HTTP2_PROTOCOL_ERROR

💁 Possible Solution

Unknown

🔦 Context

I require the Auto template for using EntraID authorization.

🌍 Your Environment

Visual Studio Community Edition Version 17.12.3
Windows 11
FLuent Blazor Templates Version 4.11.0

[marqdouj]

I put a breakpoint in OnInitializedAsync and step thru it fails on this code:

    forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
    {
        Date = startDate.AddDays(index),
        TemperatureC = Random.Shared.Next(-20, 55),
        Summary = summaries[Random.Shared.Next(summaries.Length)]
    }).AsQueryable();

System.ArgumentException: The renderer does not have a component with ID 49.
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetRequiredComponentState(Int32 componentId)
at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.GetComponentDepth(Int32 componentId)
at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.SendBatchAsStreamingUpdate(RenderBatch& renderBatch, TextWriter writer)
at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.UpdateDisplayAsync(RenderBatch& renderBatch)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
--- End of stack trace from previous location ---
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.g__ProcessAsynchronousWork|62_0()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.WaitForQuiescence()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(Int32 componentId, ParameterView initialParameters)
at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.SendStreamingUpdatesAsync(HttpContext httpContext, Task untilTaskCompleted, TextWriter writer)

[marqdouj]

So I created a new Blazor Web App with Auto interactive mode.
Ran the project and Weather works fine.
I added Fluent NuGet pkgs.
Added the @using statements in _import.razor..
Copied and pasted the Weather code from the Fluent Web App.
Ran the project again and selected Weather - get the same error.
So I copied and pasted the Weather code from my previous app (that does work) and ran it again - same error.

I changed the NuGet pkgs to version to 4.10.4.
Ran the project again - Weather works fine.

I suspect the issue is with the updated DataGrid, because it fails on the line of code that updates the forecasts variable.

[vnbaaij]

This error has been fixed with PR #3090.

It indeed has to do with the changed rendering of the DataGrid. I was not able to get it working with the if.. else 'Loading...' code but with the change from the PR it will use the loading state of the grid itself (which imo looks better)

Closing this as it is a duplicate of #3068

[marqdouj]

fwiw, the grid did work if I added @rendermode InteractiveServer to Weather.

[vnbaaij]

Yes, correct. The issue only appears when using StreamRendering.