Blazor: The list of component records is not valid

Question

using Blazor dotnet core 3.1 and getting this error:

The list of component records is not valid

Found a bug report regarding this that was closed in december 2019: https://github.com/dotnet/aspnetcore/issues/14966 Don't see any reason for this error and hope there is a workaround (can not make this error each page call, it's just happening very rarely...).

Does anybody has an idea / hint which could cause this?

Thx!

Answer 1

I hit the same issue when I upgraded my app from .NET Core 3.0 to .NET Core 3.1 while using Blazor Client. The first "fix" I found was to do a force-refresh on the client (the web browser). That is, I pressed Ctrl+F5 to refresh.

I'm assuming that there was some API call that was being cached on the client and due to some version/format changes from 3.0 to 3.1, the old cached data was no longer valid, causing an error.

I'll be contacting the people who work on Blazor to try to get more info (I work with them at Microsoft).

---

Update June 1, 2020

I hit this again running my app on Azure App Services. This time even Ctrl+F5 didn't work. But I found https://stackoverflow.com/a/59356356/31668, and applied the fix there, which seemed to fix my problem.

I made a slight change to the code because in my case I use the Azure SignalR service only in staging/production and not in development. So I have this code in my app's Startup.cs ConfigureServices method:

if (!HostingEnvironment.IsDevelopment())
{
    services.AddSignalR().AddAzureSignalR(options =>
    {
        options.ServerStickyMode = Microsoft.Azure.SignalR.ServerStickyMode.Required;
    });
}

Answer 2

This issue may happen by browser's automatic Cache control.

Let's say you have two MVC views with Blazor components within: Pages A.cshtml and B.cshtml.

When requesting page A, you receive a html response with the Blazor component rendered and a connection is stablished. Then, you navigate to page B. If you go back to page A (e.g. pressing back button) your browser will use a cached response made previously to fetch page A.

This should break the connection between Client and Server as the component descriptors may be changed. (sometimes seems randonmly).

To solve this, disable this cache behaviour on your _Host.cshtml adding:

@{ 
    Context.Response.Headers["Cache-Control"] = "no-store";
}

This will prevent the caching from your browser and make it request a new page with a correct components descriptor.

References: https://www.gitmemory.com/issue/dotnet/aspnetcore/26174/705472525 https://github.com/dotnet/aspnetcore/issues/18143#issuecomment-585961784

Answer 3

In my case it was a class that I was using as a cascade value, but it didn't have a constructor without parameters

public class User 
{
            
    public User(ClaimsPrincipal principal) 
    {
       ....
    }
       ....
 }

 public class User 
 {
    //this fix
    public User(){}
    public User(ClaimsPrincipal principal) 
    {
       ....
    }
       ....
 }

[CascadingParameter]
private User User { get; set; }

Answer 4

In my case problem "The list of component records is not valid" was when Blazor need to serialize parameter for component in _Host.cshtml

<component type="typeof(App)" render-mode="Server" param-SessionData="@Model.SessionData" />

After long searching of the issue I've found that problem was because of NameValueCollection that was cloning in SessionData before serialization. I dont why but when I excluded variable with NameValueCollection type issue was resolved.

SessionData is a class that has a Query property of type NameValueCollection and its values were cloned in a standard way:

Query = (Query?.Count ?? 0) != 0 ? new NameValueCollection(Query) : new NameValueCollection()

I've try clone with for loop function for each item in collection but it's not helped. Only after exclusion of Query property problem was resolved.