Blazor Server App component suddenly throwing null reference exception

Question

Today a Blazor Server App I've been developing daily for a couple of weeks suddenly started throwing an exception in _Host.cshtml when I launch it in debug mode from within Visual Studio 2022. The error is shown in the attached image.

Current state of _Host.cshtml

@page "/"
@namespace Ano.Blazor.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = "_Layout";
}

<component type="typeof(App)" render-mode="ServerPrerendered" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css"/>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

Here is App.razor, the component that seems to be throwing an exception in _Host.cshtml

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <Ano.Blazor.Pages.RedirectToLogin></Ano.Blazor.Pages.RedirectToLogin>
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

The odd thing about this is that I had not made any changes to _Host.cshtml or App.razor when the exception first appeared. What I had just done was add scaffolded items for Identity, specifically the ConfirmEmail razor page.

The use of Radzen components was added yesterday and has been causing no issues. But to rule it out I tried running the app with references to the Radzen css and js removed. The exception persisted.

I have combed through every file in the solution at this point, looking for anything that could cause this. The app builds and rebuilds without errors. The exception doesn't tell me much about where the problem could be.

For comparison, I cloned the previous push to a separate folder, launched the solution in a new instance of VS 2022, ran the app in debug mode and it started normally. This got me thinking perhaps the solution itself is at fault. Corrupted? I deleted the .vs folder and allowed the original solution to recreate it but afterward the exception persists.

Has anyone seen this problem before?

Prostitution

Not much to work with, but my initial gut feeling is the code needed for authentication is not complete. – Resilience

Thanks for this suggestion. I think it's on the right track because the trouble started after I had scaffolded two new pages from Identity. I'm sort of at the mercy of that process and I'm not sure where to start looking for missing pieces. – Prostitution

I have seen this before. Check the UserManager<> in the screens you scaffolded. You maybe using UserManager<ApplicationUser> and they are trying to inject UserManager<IdentityUser> – Lithotomy

Brian, thanks for the suggestion. I am indeed using the ApplicationUser pattern in this app to extend IdentityUser, but it is being injected correctly everywhere. I have found the cause the problem and will submit the solution shortly. – Prostitution

Answer 1

The problem was that I accidentally created two pages with the same @page directive.

EditUser.razor had this directive...

@page "EditUser{id}"

EditMyAccount.razor had the same directive...

@page "EditUser{id}"

I changed EditMyAccount.razor to have this directive...

@page "EditMyAccount"

And that solved the runtime problem.

In my mind this problem was way too difficult to find because Visual Studio doesn't have any compilation warnings or runtime exceptions that give a clue to the page directives. Hopefully this will help someone else in the future.

Prostitution

I could kiss your right now. That was one of the most obtuse errors I've encountered, and my mind went straight to my Blazor security infrastructure as well. Kept checking GIT to make certain no changes had been made. – Dramatist

This happened for me too. It is really annoying to get a NullRefException because of two pages with a same route. – Mayo

thanks...you save my behind...I was pulling my hair out...there wasn't much to pull either...lol – Spoil

Answer 2

It seems any issue in your routes will cause this error. I was attempting to bind a querystring parameter ("/{parameter}?{variable}") and received the same error.

Televisor

Answer 3

Similar problem. Threw a NullPointerException in RenderTreeDiffBuilder.cs at

Line #697 in private static void AppendDiffEntriesForFramesWithSameSequence(...etc...)

var componentState = oldFrame.ComponentStateField;

The actual cause was rather indirect. I had added a new Service to our Blazor app and did not add it in our Startup.cs

E.g. In my Startup.cs I needed to:

services.AddTransient<ICityOrZipLookupService, CityOrZipLookupService>();

The null exception had no apparent relationship because Inject happens in a rather hidden manner. In my custom Component:

 public partial class EnterCityOrZipInput : ComponentBase
 {
     [Inject] public ICityOrZipLookupService CityOrZipLookupService { get; init; } = default!;
... etc ...

Quadrivial