fix: v3 Library with Blazor Web App .NET 8

🐛 Bug Report

When using the library with the new Blazor Web App (.NET8 Preview 7) template, I’m not getting any of the styles loading like the Header, etc. The content is rendering, no errors in outputs/console log/etc. just not getting any UI that is expected.

💻 Repro or Code Sample

(install .NET 8 Preview 7)

1. File…New Blazor Web App
2. Add 3.0.0-RC1 package and configure project
3. Add <Header> element to MainLayout

<FluentHeader>
    My Dashboard
</FluentHeader>

🤔 Expected Behavior

Header renders like documentation indicates

😯 Current Behavior

Header content renders, but nothing else

[vnbaaij]

@timheuer this how it works with .NET 8 at the moment (JS initializers behavior is not yet finalized, see also https://github.com/dotnet/aspnetcore/issues/50187)

With Blazor’s server-side rendering model, JS initializers don’t get called until interactive components get loaded on the page for the first time. That is, when a WebAssembly component gets added to the page, the beforeStart callback is executed and the WebAssembly runtime loads and starts, then the afterStarted callback executes. Callbacks will be re-executed if a Blazor Server component then gets added to the page.

By using the new template (which generates a SSR site) the module script (that loads the web components script and hooks up the custom events)) does not get called. Adding the web components script tag, as suggested by me before, only solves part of the problem.

I solved it in my copy of a site generated with the template as follows: 1 - Change Program.cs to add .AddServerComponents(), so from

// Add services to the container.
builder.Services.AddRazorComponents();

to

// Add services to the container.
builder.Services.AddRazorComponents().AddServerComponents();

2 - Add @attribute [RenderModeServer] to the Index page directives to force it to be a Server component so library script (.lib.module.js) gets called

I guess adding .AddWebAssemblyComponents(); to Program.cs and @attribute [RenderModeWebAssembly] to Index.razor would have the same effect.

[vnbaaij]

Thanks @vnbaaij – got the UI working…interactivity is not (sorting does nothing on clicking on the grid now)

The behavior has changed with . NET 8. I’m in contact with Mackinnon to see what would be a solution for this