Null Reference exception related to TelerikRootComponent or TelerikRootComponentFragment

Environment

Product

UI for Blazor

Description

When running a Telerik Blazor application I receive an error similar to the following:

System.NullReferenceException
   at Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragment.Dispose()
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.Dispose()

NullReferenceException: Object reference not set to an instance of an object.
    at Telerik.Blazor.Components.RootComponent.TelerikRootComponentFragmentBase.Dispose()

Object reference not set to an instance of an object.
    at Telerik.Blazor.Components.TelerikRootComponentFragmentBase.OnInitAsync()

Possible Cause

The origin of this behavior is a missing <TelerikRootComponent> from the MainLayout.razor file in the project.

You can reproduce this with the following snippet:

Missing TelerikRootComponent from the MainLayout file

@inherits LayoutComponentBase

    <div class="sidebar">
        <NavMenu />
       </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>

Solution

Wrap the entire content of the MainLayout.razor file inside the <TelerikRootComponent>. Read more on the assets and configuration steps you need in the What You Need article.

Wrapping the content of the MainLayout file inside the TelerikRootComponent

@inherits LayoutComponentBase

<TelerikRootComponent>

    <div class="sidebar">
        <NavMenu />
       </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>

</TelerikRootComponent>