Rendering done twice in blazor WebAssembly app plus the JSException exception thrown

Describe the bug

I am building a page that uses the base class to perform some common operations. The base class has the Initialization method the purpose of which is to pre-load the data to the page. However what I noticed is that page’s initialization method is failing to await on the method in base class. (see code) part 1: This causes the page to throw the exception (InvalidOperationException) because objects are not initialized at the time of the first page render! part 2: Furthermore, after base classe’s method finishes execution (continues from the await statement) - it causes page re-rendering. part 3: And finally Error: No element is currently associated with component 23 exception (JSException) is thrown as if that was not enough 😃

To Reproduce

First create a fresh project in VisualStudio. Latest .Net 5 Blazor WASM (ASP.NET Core hosted) template.

Then create following classes: MypageBase.cs:

namespace BlazorDemos.Client.Pages
{
    public partial class MypageBase : ComponentBase
    {
        protected int? _preloadedObject;

        [Inject] protected HttpClient Http { get; set; }

        protected async Task Init()
        {
            Console.WriteLine($"Trigger Init");
            await PreloadData();
        }

        protected async Task PreloadData()
        {
            Console.WriteLine($"Trigger PreloadData");

            // the code will NOT wait on following line:
            var vocabsResponse = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
            _preloadedObject = vocabsResponse.Count();

            Console.WriteLine($"Finish PreloadData");
        }
    }
}

Mypage.razor:

@page "/mypage"

@inherits BlazorDemos.Client.Pages.MypageBase;

@{
    string _preloadedObjectValue = _preloadedObject.HasValue ? _preloadedObject.Value.ToString() : "NULL";
    Console.WriteLine($"Trigger rendering. _preloadedObject={_preloadedObjectValue}");

    int pow = _preloadedObject.Value * 2;
}

Mypage.razor.cs

namespace BlazorDemos.Client.Pages
{
    public partial class Mypage
    {
        protected override async Task OnInitializedAsync()
        {
            Console.WriteLine($"Trigger OnInitializedAsync");
            await base.Init();
        }
    }
}

Expected result (log)

Trigger OnInitializedAsync
Trigger Init
Trigger PreloadData
Finish PreloadData
Trigger rendering. _preloadedObject=5

Actual result (log)

Trigger OnInitializedAsync
Trigger Init
Trigger PreloadData
Trigger rendering. _preloadedObject=NULL

Exception: Unhandled exception rendering component: Nullable object must have a value.

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Nullable object must have a value.
System.InvalidOperationException: Nullable object must have a value.
   at System.Nullable`1[[System.Int32, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].get_Value()
   at BlazorDemos.Client.Pages.Mypage.BuildRenderTree(RenderTreeBuilder __builder) in C:\Users\pavne\source\repos\BlazorDemos\BlazorDemos\Client\Pages\Mypage.razor:line 9
   at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
'BlazorDemos.Server.exe' (CoreCLR: clrhost): Loaded 'Anonymously Hosted DynamicMethods Assembly'. 

Finish PreloadData
Trigger rendering. _preloadedObject=5

Exception: Unhandled exception rendering component: No element is currently associated with component 23

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: No element is currently associated with component 23
      Error: No element is currently associated with component 23
          at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:31696)
          at Object.t.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:12129)
          at Object.window.Blazor._internal.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:61899)
          at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:64421)
          at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.3.js:1:190800)
          at wasm_invoke_iiiiii (<anonymous>:wasm-function[5611]:0xdda7f)
          at ves_pinvoke_method (<anonymous>:wasm-function[5708]:0xdfb62)
          at interp_exec_method (<anonymous>:wasm-function[2155]:0x44c08)
          at interp_runtime_invoke (<anonymous>:wasm-function[7862]:0x12efff)
          at mono_jit_runtime_invoke (<anonymous>:wasm-function[7347]:0x118e5f)
Microsoft.JSInterop.JSException: No element is currently associated with component 23
Error: No element is currently associated with component 23
    at e.updateComponent (https://localhost:5001/_framework/blazor.webassembly.js:1:31696)
    at Object.t.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:12129)
    at Object.window.Blazor._internal.renderBatch (https://localhost:5001/_framework/blazor.webassembly.js:1:61899)
    at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:64421)
    at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.3.js:1:190800)
    at wasm_invoke_iiiiii (<anonymous>:wasm-function[5611]:0xdda7f)
    at ves_pinvoke_method (<anonymous>:wasm-function[5708]:0xdfb62)
    at interp_exec_method (<anonymous>:wasm-function[2155]:0x44c08)
    at interp_runtime_invoke (<anonymous>:wasm-function[7862]:0x12efff)
    at mono_jit_runtime_invoke (<anonymous>:wasm-function[7347]:0x118e5f)
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Int32,RenderBatch,Object,Object](String identifier, Int32 arg0, RenderBatch arg1, Object arg2, Int64 targetInstanceId)
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.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()

Further technical details

Lots of text ahead

.NET SDK (reflecting any global.json): Version: 5.0.103 Commit: 72dec52dbd

Runtime Environment: OS Name: Windows OS Version: 10.0.19042 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\5.0.103\

Host (useful for support): Version: 5.0.3 Commit: c636bbdc8a

.NET SDKs installed: 3.1.406 [C:\Program Files\dotnet\sdk] 5.0.102 [C:\Program Files\dotnet\sdk] 5.0.103 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.All 2.1.24 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.All 2.1.25 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.App 2.1.24 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 2.1.25 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 2.1.24 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 2.1.25 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.12 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Microsoft Visual Studio Community 2019 Version 16.8.5 VisualStudio.16.Release/16.8.5+31005.135 Microsoft .NET Framework Version 4.8.04084

Installed Version: Community

Visual C++ 2019 00435-60000-00000-AA596 Microsoft Visual C++ 2019

ASP.NET and Web Tools 2019 16.8.559.8768 ASP.NET and Web Tools 2019

ASP.NET Core Razor Language Services 16.1.0.2052803+84e121f1403378489b842e1797df2f3f5a49ac3c Provides languages services for ASP.NET Core Razor.

ASP.NET Web Frameworks and Tools 2019 16.8.559.8768 For additional information, visit https://www.asp.net/

Azure App Service Tools v3.0.0 16.8.559.8768 Azure App Service Tools v3.0.0

Azure Functions and Web Jobs Tools 16.8.559.8768 Azure Functions and Web Jobs Tools

C# Tools 3.8.0-5.20604.10+9ed4b774d20940880de8df1ca8b07508aa01c8cd C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Common Azure Tools 1.10 Provides common services for use by Azure Mobile Services and Microsoft Azure Tools.

IntelliCode Extension 1.0 IntelliCode Visual Studio Extension Detailed Info

Markdown Editor 1.12.253 A full featured Markdown editor with live preview and syntax highlighting. Supports GitHub flavored Markdown.

Microsoft Azure Tools 2.9 Microsoft Azure Tools for Microsoft Visual Studio 2019 - v2.9.30924.1

Microsoft Continuous Delivery Tools for Visual Studio 0.4 Simplifying the configuration of Azure DevOps pipelines from within the Visual Studio IDE.

Microsoft JVM Debugger 1.0 Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines

Microsoft Library Manager 2.1.113+g422d40002e.RR Install client-side libraries easily to any web project

Microsoft MI-Based Debugger 1.0 Provides support for connecting Visual Studio to MI compatible debuggers

Microsoft Visual C++ Wizards 1.0 Microsoft Visual C++ Wizards

Microsoft Visual Studio Tools for Containers 1.1 Develop, run, validate your ASP.NET Core applications in the target environment. F5 your application directly into a container with debugging, or CTRL + F5 to edit & refresh your app without having to rebuild the container.

Microsoft Visual Studio VC Package 1.0 Microsoft Visual Studio VC Package

NuGet Package Manager 5.8.1 NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/

NVIDIA CUDA 10.1 Wizards 10.1 Wizards to create new NVIDIA CUDA projects and source files.

NVIDIA CUDA 11.0 Wizards 11.0 Wizards to create new NVIDIA CUDA projects and source files.

NVIDIA Nsight Visual Studio Edition 2020.1.2.20203 NVIDIA Nsight Visual Studio Edition provides tools for GPGPU and graphics development. Copyright © NVIDIA 2010 - 2020. •Direct3D® and DirectX® are registered trademarks of Microsoft Corporation in the United States and/or other countries. •Microsoft Detours is used under the Professional license (http://research.microsoft.com/en-us/projects/detours/). •Gardens Point Parser Generator Copyright 2005 Queensland University of Technology (QUT). All rights reserved. •Icons from Axialis Software used under the licensing terms found here: www.axialis.com •NLog Copyright © 2004-2006 Jaroslaw Kowalski ([e-mail]) •zlib and libpng used under the zlib/libpnc license (http://opensource.org/licenses/Zlib) •Breakpad Copyright ©2006, Google Inc. All rights reserved. •The OpenGL Extension Wrangler Library Copyright ©2008-2016, Nigel Stewart ([e-mail]), Copyright ©2002-2008, Milan Ikits ([e-mail]), Copyright ©2002-2008, Marcelo E. Magallon ([e-mail]), Copyright ©2002, Lev Povalahev. All rights reserved. •LIBSSH2 Copyright ©2004-2007 Sara Golemon ([e-mail]), Copyright ©2005,2006 Mikhail Gusarov ([e-mail]),Copyright ©2006-2007 The Written Word, Inc.,Copyright ©2007 Eli Fant ([e-mail]),Copyright ©2009-2014 Daniel Stenberg., Copyright ©2008, 2009 Simon Josefsson. All rights reserved. •Protobuf Copyright ©2014, Google Inc. All rights reserved. •xxHASH Library Copyright ©2012-2014, Yann Collet. All rights reserved. •FMT Copyright ©2012 - 2016, Victor Zverovich •Font Awesome Copyright 2018 Fonticons, Inc. •ELF Definitions Copyright © 2010 Joseph Koshy, All rights reserved.

Warning: This computer program is protected by copyright law and international treaties. Unauthorized reproduction or distribution of this program, or any portion of it, may result in severe civil and criminal penalties, and will be prosecuted to the maximum extent possible under the law.

NVIDIA Nsight Visual Studio Edition - CUDA support 2020.1.2.20203 NVIDIA Nsight Visual Studio Edition - CUDA support provides tools for CUDA development and debugging.

ProjectServicesPackage Extension 1.0 ProjectServicesPackage Visual Studio Extension Detailed Info

SQL Server Data Tools 16.0.62102.01130 Microsoft SQL Server Data Tools

Test Adapter for Boost.Test 1.0 Enables Visual Studio’s testing tools with unit tests written for Boost.Test. The use terms and Third Party Notices are available in the extension installation directory.

Test Adapter for Google Test 1.0 Enables Visual Studio’s testing tools with unit tests written for Google Test. The use terms and Third Party Notices are available in the extension installation directory.

TypeScript Tools 16.0.21016.2001 TypeScript Tools for Microsoft Visual Studio

Visual Basic Tools 3.8.0-5.20604.10+9ed4b774d20940880de8df1ca8b07508aa01c8cd Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Visual F# Tools 16.8.0-beta.20507.4+da6be68280c89131cdba2045525b80890401defd Microsoft Visual F# Tools

Visual Studio Code Debug Adapter Host Package 1.0 Interop layer for hosting Visual Studio Code debug adapters in Visual Studio

Visual Studio Container Tools Extensions 1.0 View, manage, and diagnose containers within Visual Studio.

Visual Studio Tools for CMake 1.0 Visual Studio Tools for CMake

Visual Studio Tools for Containers 1.0 Visual Studio Tools for Containers

• ASP.NET Core version
• Include the output of dotnet --info
• The IDE (VS / VS Code/ VS4Mac) you’re running on, and its version

Further comments

Regardless if it’s a bug or not - it would be helpful to know how exactly can I active the wished behavior? How can I force the class that implements the base class to wait until base-classes method finishes execution. Without rendering page twice, of course, if possible…

[javiercn]

When a component fails to render the current behavior is to tear down the application, since we consider the state of the application to be undefined at that point. Is the same thing as if you use the RenderTreeBuilder APIs and produce an unbalanced tree. We don’t guarantee there are not going to be any errors or that the app can continue running.

[javiercn]

Since I use the await in every place possible - doesn’t this guarantee that the code is to be executed synchronously?

Doesn’t work that way. await is (more or less) syntactic sugar for task.ContinueWith so your code is more like

Task OnInitializedAsync()
{
  // some stuff before await
  return awaitedMethod().ContinueWith(() => { // Code after await });
}

The code that invokes OnInitializedAsync (in this case the framework) can decide to await the result of OnInitializedAsync (in which case it would serialize the execution) or can do other things before doing so.

In the case of ComponentBase, it decides to call StateHasChanged at that point to trigger a render, and then manually checks if the task is completed and in case it is not, it does something like initResult.ContinueWith(t => { StateHasChanged();}) and that’s why you see two renders.