Error: The list of component records is not valid -Integrate Razor components into Razor Pages

[shitalumare]

My issue is :
I have Integrated Razor components into my existing aspnet core 3.1 Razor Pages application.
I am working in a new ASP.NET Core 3.1 With Razor Pages application and I want to use third party Blazor components in it but I'm having trouble getting it to work.

I have referred below documents to inegrate
https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1
and made changes to below files :

_Layout.cshtml
 <base href="/" />
  <script src="~/js/BlazorTable.min.js" asp-append-version="true"></script>
<script src="/_framework/blazor.server.js" autostart="false"></script>

Startup.cs
ConfigureServices(){services.AddServerSideBlazor();}
Configure()
{
app.UseEndpoints(endpoints => {
endpoints.MapRazorPages();
endpoints.MapBlazorHub();
}
}

calling DisplayComponent.Razor in Areas/UserManagement/Index.cshtml  razor page
@(await Html.RenderComponentAsync <DisplayComponent> (RenderMode.ServerPrerendered, new { UserList = Model.UserList }))

but I am getting below error on console and paging sorting and filtering not working.

[2020-01-29T17:12:31.832Z] Information: Normalizing '_blazor' to 'https://localhost:44349/_blazor'.
blazor.server.js:1 [2020-01-29T17:12:31.961Z] Information: WebSocket connected to wss://localhost:44349/_blazor?id=oHqH7sh9smO7nwc6aI0Kqw.
blazor.server.js:1 [2020-01-29T17:12:31.962Z] Information: Using HubProtocol 'blazorpack'.
blazor.server.js:15 [2020-01-29T17:12:32.026Z] Error: The list of component records is not valid.
e.log @ blazor.server.js:15
blazor.server.js:1 [2020-01-29T17:12:32.027Z] Information: Connection disconnected.
blazor.server.js:1 Uncaught (in promise) Error: Invocation canceled due to the underlying connection being closed.
at e.connectionClosed (blazor.server.js:1)
at e.connection.onclose (blazor.server.js:1)
at e.stopConnection (blazor.server.js:1)
at e.transport.onclose (blazor.server.js:1)
at e.close (blazor.server.js:1)
at e.stop (blazor.server.js:1)
at e. (blazor.server.js:1)
at blazor.server.js:1
at Object.next (blazor.server.js:1)
at a (blazor.server.js:1)

[mkArtakMSFT]

Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project (ideally a GitHub repo) that illustrates the problem.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

See our Issue Management Policies for more information.

[shitalumare]

Hi,
I'm working in a new ASP.NET Core 3.1 With Razor Pages application and I want to use third party Blazor components (BlazorTable:https://github.com/IvanJosipovic/BlazorTable) in it but I'm having trouble getting it to work.
I have created new ASP.NET Core 3.1 razor application and used same third party Blazor components (BlazorTable) in it and it is working just fine. I can do paging,sorting,filtering, all functionality works fine as mentioned in BlazorTable.
But when i tried to use in my existing project it just refuses to work.

Also I have tried adding new razor component with counter button on it in my existing application and that is also working fine.

I'm not sure what's preventing third party components from working.
below changes made in my existing application to get work BlazorTable.

_Layout.cshtml
 <base href="~/" />
  <script src="~/js/BlazorTable.min.js" asp-append-version="true"></script>
<script src="~/_framework/blazor.server.js"></script>

Startup.cs
ConfigureServices(){services.AddServerSideBlazor();}
Configure()
{
app.UseEndpoints(endpoints => {
endpoints.MapRazorPages();
endpoints.MapBlazorHub();
}
}

DisplayComponent.razor
@page "/DisplayComponent"
@inject HttpClient Http
@using BlazorTable
@using System.ComponentModel
<Table TableItem="PersonData " Items="UserList" PageSize="5" ColumnReorder="true">
    <Column TableItem="PersonData " Title="First Name" Field="@(x => x.full_name )" Sortable="true" Filterable="true" Width="10%" DefaultSortColumn="true" />
 <Column TableItem="PersonData " Title="Role" Field="@(x => x.RoleName)" Sortable="true" Filterable="true" Width="10%">
    </Column>
</Table>

calling DisplayComponent.Razor in Areas/UserManagement/Index.cshtml razor page
@(await Html.RenderComponentAsync <DisplayComponent> (RenderMode.ServerPrerendered, new { UserList = Model.UserList }))

I can see the table displaying list of person data but when i click on that table column for sorting,filtering,paging ,it is not working.
I am getting below error on console and paging sorting and filtering not working.

[2020-01-29T17:12:31.832Z] Information: Normalizing '_blazor' to 'https://localhost:44349/_blazor'.
blazor.server.js:1 [2020-01-29T17:12:31.961Z] Information: WebSocket connected to wss://localhost:44349/_blazor?id=oHqH7sh9smO7nwc6aI0Kqw.
blazor.server.js:1 [2020-01-29T17:12:31.962Z] Information: Using HubProtocol 'blazorpack'.
blazor.server.js:15 [2020-01-29T17:12:32.026Z] Error: The list of component records is not valid.
e.log @ blazor.server.js:15
blazor.server.js:1 [2020-01-29T17:12:32.027Z] Information: Connection disconnected.
blazor.server.js:1 Uncaught (in promise) Error: Invocation canceled due to the underlying connection being closed.
at e.connectionClosed (blazor.server.js:1)
at e.connection.onclose (blazor.server.js:1)
at e.stopConnection (blazor.server.js:1)
at e.transport.onclose (blazor.server.js:1)
at e.close (blazor.server.js:1)
at e.stop (blazor.server.js:1)
at e. (blazor.server.js:1)
at blazor.server.js:1
at Object.next (blazor.server.js:1)
at a (blazor.server.js:1)

I refereed below link but still no luck.
https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application

I can't really share the entire project. It's a big large and has customized business logic in it already, along with API keys and other sensitive information.

Thank you

[captainsafia]

Hello, @shitalumare -- there's quite a few different components being integrated in this application so it is difficult to see where the error is without a reproduction.

The exception message you see ("The list of component records is not valid.") can happen for a couple of reasons:

• If this issue is showing up on a deployment with multiple servers but no sticky sessions, you might run into this issue as the server/client are out of sync. You can enable sticky mode to resolve this.
• The issue can also happen if the web app is restarted after the server completed the pre-render.

Some follow-ups:

• Can you provide a minimal reproduction of this issue in a GitHub repo?
• Can you double check that you followed all the steps in this guide?
• Can you verify that BlazorTable is configured correctly?

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

See our Issue Management Policies for more information.

[infofromca]

this also happen for me too, when I put form.cshtml as following
@(await Html.RenderComponentAsync<GuangCore.BlazorForms.FormWrapperBlazor>(RenderMode.ServerPrerendered,
new { Id = id,
Action = formPart.Action, Method = formPart.Method, EncType = encType,
FormContentTypeClassName = formContentTypeClassName,
EnableAntiForgeryToken = formPart.EnableAntiForgeryToken,
ChildContent = childContent,
AntiForgeryToken = antiForgeryToken
}))
)
and input.cshtml as following:
@(await Html.RenderComponentAsync<GuangCore.BlazorForms.InputPartBlazor>(RenderMode.ServerPrerendered, new { Id = fieldId, Name= fieldName, Value = fieldValue, Fieldtype=Model.Value.Type, Fieldclass = fieldClass, Placeholder= Model.Value.Placeholder }))

at the same time

[infofromca]

more, when I use normal form inside form.cshtml,
but input.cshtml as above , and inputbutton.cshtml as following:
@(await Html.RenderComponentAsync<GuangCore.BlazorForms.ButtonPartBlazor>(RenderMode.ServerPrerendered, new { Id = elementId, Name= elementName, Value = Model.Value.Text, Fieldtype=Model.Value.Type }))
in this case, no error.

so, my guess (not dive to source code), the key is pyramid. ( which is similar to #14474 ? )