When multiple Blazor components are placed on a page served by Umbraco, and one of the Blazor components is rendered within an Umbraco macro, it results in an error in the browser console: "The list of component records is not valid." This error is thrown by blazor.server.js, not by .NET code.

The implementation of my site has a Blazor component in the layout code that displays a search input and search results directly below it. Naturally, I need that search bar on every page. Many of the individual pages are intended to render another blazor component in the body area that carries out different functionality depending on the page. I created macros to contain the Blazor components and allow them to be dropped into the page grid, but when I place the macro on the page (with the search Blazor component in the layout), Blazor crashes. However, when I remove the search Blazor component from the layout code, the page and body Blazor component work just fine. Likewise, the search bar functionality has no errors and works when no macro containing a Blazor component is present.

I did find a workaround. It was to build a separate template for each page containing a Blazor component in the body. Obviously I would not need macros if the template is responsible for rendering all the elements in the page. This allowed me to use both the search and the body Blazor component together without problems. However, I had plans to develop re-useable Blazor components that can also be moved around in the page grid. This is not possible because I can't render the Blazor components in macros in this scenario.

Here's how I implement a Blazor component rendered within a macro in a page served by Umbraco:

1) Create a macro in Umbraco

2) Implement the Blazor component in the code project (let's call it MyBlazorComponent)

3) Render the Blazor component within the macro partial view with this line of code:

@(await Html.RenderComponentAsync<MyBlazorComponent>(RenderMode.Server, new { someParameter=someValue }))

4) Drop the macro into a page's grid and publish.

I am using Blazor Server because the business requirements dictates that the data operations be carried out centrally on the server.

I have tried to use RenderMode.ServerPrerendered on both the search component and body component, and this would solve the problem only if the body blazor component does not have child components. If there are child components, the same error occurs. I then tried to set the render mode of the child components. However, within a Blazor component's code, there doesn't seem to be a way to set the render mode of the child component, as far as I know. It seems you can only do so in .cshtml files, not .razor files.

I have tried all the solutions offered by StackOverflow but none resolves the issue, so I figure it may be a problem specific to Umbraco.

Does anyone know how to properly set up/implement what I tried to do here?

My site is built in Umbraco 11, .NET 7.