Prerendered hosted Blazor WASM errors not addressed by guidance (.NET 10)

[Krangth]

The instructions regarding setting up a solution with working WebAssemblyPrerendered are too difficult to follow. I have spent several hours trying to follow along and I just cannot get it to work.

Step 4 says:
Add _Host.cshtml and _Layout.cshtml files to the Server project's Pages folder. You can obtain the files from a project created from the Blazor Server template using Visual Studio or using the .NET CLI with the dotnet new blazorserver -o BlazorServer command in a command shell (the -o BlazorServer option creates a folder for the project). After placing the files into the Server project's Pages folder, make the following changes to the files.

That template does not contain a _Layout.cshtml file.

I encountered numerous error messages and I couldn't find any information on how to resolve them. I'm going to switch to a Blazor Server solution instead.

I think that there should be two dotnet new templates for a blazor wasm hosted with prerendering enabled. One with auth and one without auth. Then I could at least do a diff on my solution versus the working solution.

---

Document Details

⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.

• ID: 329a19ef-fb46-1f6b-a734-fa1c1334b1e5
• Version Independent ID: 3fa4318a-3c11-c1d8-bf24-ddc6d8441ca2
• Content: Prerender and integrate ASP.NET Core Razor components
• Content Source: aspnetcore/blazor/components/prerendering-and-integration.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

There isn't too much I can do about it ... just the complexity aspect that is. This is (or was given that it hasn't been checked since perhaps the 6.0 release) ... this is the set of required steps to set it up.

WRT ...

That template does not contain a _Layout.cshtml file.

That's for 6.0. In 7.0, they went back to _Host.cshtml. I'll check to confirm that that step is versioned properly. If you're looking at the 6.0 version of the topic, that's fine. If you're looking at the 5.0 or 7.0 version of the topic, that shouldn't be there.

I think that there should be two dotnet new templates for a blazor wasm hosted with prerendering enabled. One with auth and one without auth. Then I could at least do a diff on my solution versus the working solution.

That would have to be a product unit request provided to them on their repo at ...

https://github.com/dotnet/aspnetcore/issues

As for this issue, let's leave it here for me to take some time and check the guidance against 7.0 to see if I can get it to work these days ... if not to get it working for >=7.0. I'm buried in security updates for a few more weeks, so I think the soonest that I would reach this is in March.

[guardrex]

No ... actually ... you are looking at the 6.0 version of the topic. If you use the doc version selector and look at the 7.0 version of the topic, that content on _Layout.cshtml in the Pages folder of the client app goes away correctly. I did get the versioning correct on that.

Ok ... so that's fine. I do need to check the whole process tho against 7.0 to see if I can get it to 💥 ... or work. I'll get back to this as soon as I can.

[Krangth]

I mistakenly had not considered that the dotnet new command was creating the project for .net 7 and not .net 6.

However, I also followed the instructions for creating a new hosted option dotnet new blazorwasm -ho and the instructions appear to work correctly. But if the user clicks any links too soon the page produces an error. And if the user reloads any page, except the home page, a 404 error appears. Is that expected? That means a user wouldn't be able to share a link.

[guardrex]

I'm not sure. I'll definitely take that into account when I walk the steps to see what's what. If we need product unit support for items like that, I'll probably refer you to the product repo to open an issue for them. First, let me see if I can reproduce those behaviors here.

I was thinking that I'd like to push this to beyond the security work, but I'll do it on Tuesday morning. We're on a three-day holiday for President's Day ... back on Tuesday. I'll get back to you.

[guardrex]

I'm going to walk these steps right now. Unfortunately, I've been up since 3am due to a family member's coughing related to COVID. 🤕 There is nothing else to do around here at this hour but work! 🤣

I mistakenly had not considered that the dotnet new command was creating the project for .net 7 and not .net 6.

It's probably worth mentioning at the start of the whole section that the reader should be careful to look at the version of the document for the version of ASP.NET Core that they're adopting, so I'll at least call that out.

I'll be back in a bit. I'll see if I can repro what you reported.

[guardrex]

Ok ... let's take these one at a time ...

> But if the user clicks any links too soon the page produces an error.

I can't detect any problems. However, I'm using a very FAST 🏃 PC here.

Also, you didn't say what links you're clicking that are failing, nor did you indicate what error or behavior you're seeing.

> And if the user reloads any page, except the home page, a 404 error appears. Is that expected? That means a user wouldn't be able to share a link.

😮 I wasn't aware of this! As you said ... when reloading on the FetchData page or opening another browser and attempting to navigate directly to that page, I get ...

InvalidOperationException: Cannot provide a value for property 'Http' on type 'BlazorHosted.Client.Pages.FetchData'. There is no registered service of type 'System.Net.Http.HttpClient'.

Full stack trace for reference (I'll need this in a sec because I'm going to report this) ...

System.InvalidOperationException: Cannot provide a value for property 'Http' on type 'BlazorHosted.Client.Pages.FetchData'. There is no registered service of type 'System.Net.Http.HttpClient'.
   at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass7_0.<CreateInitializer>g__Initialize|1(IServiceProvider serviceProvider, IComponent component)
   at Microsoft.AspNetCore.Components.ComponentFactory.PerformPropertyInjection(IServiceProvider serviceProvider, IComponent instance)
   at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame& frame, Int32 parentComponentId)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
   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.RenderTree.Renderer.AddToRenderQueue(Int32 componentId, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()
   at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(Int32 componentId, ParameterView initialParameters)
   at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.RenderComponentAsync(Type componentType, ParameterView initialParameters)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c__11`1.<<InvokeAsync>b__11_0>d.MoveNext()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.PrerenderedWebAssemblyComponentAsync(HttpContext context, Type type, ParameterView parametersCollection)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, Object parameters)
   at Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output)
   at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, Int32 i, Int32 count)
   at BlazorHosted.Server.Pages.Pages__Host.<ExecuteAsync>b__14_1() in C:\Users\guard\OneDrive\Desktop\BlazorHosted\Server\Pages\_Host.cshtml:line 20
   at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperExecutionContext.SetOutputContentAsync()
   at BlazorHosted.Server.Pages.Pages__Host.ExecuteAsync()
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, Boolean invokeViewStarts)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|30_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
   at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
   at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)

Also, when reloading rapidly on the Counter page, I get a client-side (i.e., in the console) error. The following only happens when I reload rapidly, not slowly. Relatively slow reloads seem to be fine.

System.AggregateException: One or more errors occurred. (error loading dynamically imported module
---> Microsoft.JSInterop.JSException: error loading dynamically imported module

at Microsoft.JSInterop.JSRuntime.d__16`1[[Microsoft.JSInterop.IJSObjectReference, Microsoft.JSInterop, Version=7.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
at Microsoft.AspNetCore.Components.WebAssembly.HotReload.WebAssemblyHotReload.InitializeAsync()
at Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHost.RunAsyncCore(CancellationToken cancellationToken, WebAssemblyCultureProvider cultureProvider)
at Program.

$(String[] args)
--- End of inner exception stack trace ---

Opening for the product unit

I'll open a product unit issue on these and ping you on it.

[guardrex]

Ok, that issue on their repo will get us started here, but I'm going to put in a quick "addresses" PR to call out that the reader should be careful with which version of the topic that they're consuming relative to the version of ASP.NET Core that they're working in. As you say, looking at the 6.0 version of the topic and working in 5.0 or 7.0+ will be very confusing given the churn on the _Layout.cshtml file, which was only used for the 6.0 release.