Null Reference exception related to TelerikRootComponent or TelerikRootComponentFragment

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()

Cause\Possible Cause(s)

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>