Aspnetcore: Issue when using **WebAssemblyPrerendered** in a _Host page for rendering a Blazor app

[captainsafia]

When using the WebAssemblyPrerendered in a _Host page for rendering a Blazor app, Renders as expected on the server, but fails with the below error when trying to activate the WebAssembly client-side. I have tried using the ServerPrerendered and it fails even on the server now, and this app was working before the update to .NET 5 RC1. I following the instructions at the link (Blog Posted on gitter.im by @danroth27) below for _Upgrade an existing project_ and _Blazor WebAssembly prerendering_.

So I started a new project and only made the minimum necessary changes to do a WebAssemblyPrerendered project that is a DotNetCore Hosted server with the _Host page.

I get the same error in either both my existing project or the new project.

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read property 'insertBefore' of null
      TypeError: Cannot read property 'insertBefore' of null
          at s (https://localhost:5001/_framework/blazor.webassembly.js:1:8901)
          at Object.t.createAndInsertLogicalContainer (https://localhost:5001/_framework/blazor.webassembly.js:1:9936)
          at e.insertComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:32392)
          at e.insertFrame (https://localhost:5001/_framework/blazor.webassembly.js:1:31007)
          at e.applyEdits (https://localhost:5001/_framework/blazor.webassembly.js:1:29142)
          at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:28458)
          at Object.t.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:11924)
          at Object.window.Blazor._internal.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:57967)
          at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:60490)
          at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.0-rc.1.20451.14.js:1:183003)
Microsoft.JSInterop.JSException: Cannot read property 'insertBefore' of null
TypeError: Cannot read property 'insertBefore' of null
    at s (https://localhost:5001/_framework/blazor.webassembly.js:1:8901)
    at Object.t.createAndInsertLogicalContainer (https://localhost:5001/_framework/blazor.webassembly.js:1:9936)
    at e.insertComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:32392)
    at e.insertFrame (https://localhost:5001/_framework/blazor.webassembly.js:1:31007)
    at e.applyEdits (https://localhost:5001/_framework/blazor.webassembly.js:1:29142)
    at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:28458)
    at Object.t.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:11924)
    at Object.window.Blazor._internal.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:57967)
    at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:60490)
    at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.0-rc.1.20451.14.js:1:183003)
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.Microsoft.JSInterop.IJSUnmarshalledRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object,Object](String identifier, Int32 arg0, RenderBatch arg1, Object arg2)
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.Microsoft.JSInterop.IJSUnmarshalledRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object](String identifier, Int32 arg0, RenderBatch arg1)
   at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync(RenderBatch& batch)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
f.printErr @ blazor.webassembly.js:1

Blog Post by @danroth27
https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/

_Originally posted by @daemogar in https://github.com/dotnet/core/issues/5200#issuecomment-693639454_

[guardrex]

@captainsafia ... is your sample app in an accessible repo? I ran into a different problem working the docs issue, and I was wondering if I could see your test app to see if I can get my console error sorted out because it sounds like you took a different approach implementing @danroth27's guidance.

[captainsafia]

This is actually an issue that a user reported in another repro that I migrated here for triage.

@daemogar Can you share the repro for this?

[guardrex]

@daemogar ... I also walked that guidance, so you might want to check my docs PR to compare notes. I have the two scenarios working (hosted WASM and components in pages/views), but I have a pesky console error that I can't figure out. I _didn't_ hit the problem that you're reporting here.

[daemogar]

@guardrex I have a SampleHostedApplication with all the things I have done that replicate the issue I have. This can be run in VS Code for the same issue.

[guardrex]

Thanks @daemogar ... I'll try to look at that tomorrow (Friday) to compare notes. I think it's good that you hit a different error than I did. It might be that I'm close to getting the basic doc coverage figured out. I'll post back when I have more info either way. Thanks again!

[guardrex]

Looks like the only thing that you did different is:

• Wrap your Component Tag Helper in a <div> with an id of app.
• You don't have a namespace for the server app's Pages.
• You left index.html in the client app ... I delete the file.

I gave it a shot and ended up with a _3rd (new) error_ ...

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: s.parentNode is null
s@http://localhost:5000/_framework/blazor.webassembly.js:1:8888
...

Also, the whole app failed. My approach (described on the PR) leaves the app working ... but perhaps in an unstable state ... just throwing a console error.

My console error is ...

Microsoft.JSInterop.JSException: Could not find any element matching selector '#app'. blazor.webassembly.js:1:14673

[guardrex]

:tada: _Ah, ha!_ :tada: ... I just got rid of that console error by deleting ...

builder.RootComponents.Add<App>("#app");

... from the client app's Program.Main. I think I'm good over there for review, but I have little confidence until Javier or Safia has a look. In spite of a working app now, I might be doing it wrong. It's just a collection of 🙈 RexHacks!:tm: 🙈 at this point.

[daemogar]

So as it turns out, yours and my issues were actually related. With the new _WebAssemblyPrerendered_ render mode, you no longer need the builder.RootComponents.Add<App>("#app"); in your WASM app. So I removed that line and it worked like a charm. The _index.html_ file and the need for the <div> were not necessary, so I removed both. I have updated my sample code for clarification. Thanks for the help, and we can close this issue.

[guardrex]

Thanks @daemogar ... I'm glad to hear that. It gives me a bit more confidence in that docs PR. I'll wait for Javier to get back and review for final touches.

[msftbot[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

See our Issue Management Policies for more information.

[ChristianWeyer]

@guardrex pre-rendering gets a lot more involved and complicated when you are beyond a Hello World app.
E.g. if you have authentication in your Blazor WASM client and want to do pre-rendering, you get this:

InvalidOperationException: Cannot provide a value for property 'AuthenticationStateProvider' on type 'Microsoft.AspNetCore.Components.Authorization.CascadingAuthenticationState'. There is no registered service of type 'Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider'.
Microsoft.AspNetCore.Components.ComponentFactory+<>c__DisplayClass6_0.<CreateInitializer>g__Initialize|2(IServiceProvider serviceProvider, IComponent component)

[guardrex]

I haven't worked the WASM auth topic set for [RC1] Microsoft Identity Platform 2.0 for Blazor (dotnet/AspNetCore.Docs #19503) yet. That work is imminent ... starting today/tomorrow or early next week. I'm just waiting on getting a couple of open PRs merged before starting, then I might just hit what you're seeing there. Thus far, the only thing I've worked out for myself (and for the Integrate components updates (dotnet/AspNetCore.Docs #19887)) PR is the base case without auth.

Since that's :point_up: a new error as far as this issue is concerned ... and if you searched this repo and didn't see an issue for that error ... _open a new issue for it on this repo_ so that the product unit can focus in on it. Please add a cc: @guardrex to your opening comment.

[daemogar]

@ChristianWeyer In my WASM part of the app, I have to create a class that implements the AuthenticationStateProvider and then add it to be Dependency Injected. Not sure if that helps.

@captainsafia You can close this ticket as resolved. I do not have an option to close it as I am not the originator.