Critical error on new blank Project from Fluent-Template

[deepx]

🐛 Bug Report

Hi.
I created a new Fluent-Blazor-WebApp. The settings are: IndivitualAccounts, https, InteractiveRendermode: Auto and Interactivity location per page/component. It runs out of the box (after apply the default db-migration) but when i hit F5 after the project runs and shows the page in browser the Error (described below) shows up.

💻 Repro or Code Sample

Just a new FluentUI-Blazor-Webapp with the settings described above.

🤔 Expected Behavior

Just run wihout errors because its a new App.

😯 Current Behavior

The page displays:

When i take a closer look to the browserconsole it shows me the following:
blazor.web.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Cannot provide a value for property 'LibraryConfiguration' on type 'Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode'. There is no registered service of type 'Microsoft.FluentUI.AspNetCore.Components.LibraryConfiguration'. System.InvalidOperationException: Cannot provide a value for property 'LibraryConfiguration' on type 'Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode'. There is no registered service of type 'Microsoft.FluentUI.AspNetCore.Components.LibraryConfiguration'. at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass9_0.<CreatePropertyInjector>g__Initialize|1(IServiceProvider serviceProvider, IComponent component) at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType, IComponentRenderMode callerSpecifiedRenderMode, Nullable1 parentComponentId)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame[] frames, Int32 frameIndex, Int32 parentComponentId)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange1 oldTree, ArrayRange1 newTree)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
`

🌍 Your Environment

• OS: Windows 11, latest Visual Studio 17.10.5
• Browser Edge: Version 127.0.2651.74, Firefox: 128.0.3 and Chrome: Version 127.0.6533.88
• Fluent UI Blazor library Version 4.9.3
• Dotnet --info:
  Host: Version: 8.0.7 Architecture: x64 Commit: 2aade6beb0

If you need more informations, feel free to ask.
regards
DeepX

[dvoituron]

Did you add this command to register all required services?

builder.Services.AddFluentUIComponents();

See https://www.fluentui-blazor.net/CodeSetup

[deepx]

Did you add this command to register all required services?

builder.Services.AddFluentUIComponents();

See https://www.fluentui-blazor.net/CodeSetup

Yes its in the Code, checked it twice, even when its directly from the Template.

[MarvinKlein1508]

I can replicate this issue with the steps above. Just a vanilla Fluent app with configuration provided above. Crashes for me on the register page with same issue.

[dvoituron]

Can you verify that you are using the latest version of the template?
https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Templates/4.9.3

I tried to reproduce this problem, no success :-(

FluentUI.Template.mp4

Do you have a git repository with your project where this issue is occurring?

[MarvinKlein1508]

Yes, I tried it with latest template 4.9.3

[MarvinKlein1508]

@dvoituron https://github.com/MarvinKlein1508/FluentUI-Issue2476

SImply run the project. After a few seconds I get:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot provide a value for property 'LibraryConfiguration' on type 'Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode'. There is no registered service of type 'Microsoft.FluentUI.AspNetCore.Components.LibraryConfiguration'.
System.InvalidOperationException: Cannot provide a value for property 'LibraryConfiguration' on type 'Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode'. There is no registered service of type 'Microsoft.FluentUI.AspNetCore.Components.LibraryConfiguration'.
   at Microsoft.AspNetCore.Components.ComponentFactory.<>c__DisplayClass9_0.<CreatePropertyInjector>g__Initialize|1(IServiceProvider serviceProvider, IComponent component)
   at Microsoft.AspNetCore.Components.ComponentFactory.InstantiateComponent(IServiceProvider serviceProvider, Type componentType, IComponentRenderMode callerSpecifiedRenderMode, Nullable`1 parentComponentId)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InstantiateChildComponentOnFrame(RenderTreeFrame[] frames, Int32 frameIndex, Int32 parentComponentId)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(DiffContext& diffContext, Int32 frameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(DiffContext& diffContext, Int32 newFrameIndex)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(DiffContext& diffContext, Int32 oldStartIndex, Int32 oldEndIndexExcl, Int32 newStartIndex, Int32 newEndIndexExcl)
   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, Int32 componentId, ArrayRange`1 oldTree, ArrayRange`1 newTree)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

[dvoituron]

Many thanks for your sample.

You can add this line builder.Services.AddFluentUIComponents(); in the "second" Program.cs file (in BlazorApp4.Client project).
This code is probably needed when the project is loaded using the WebAssembly part of the Auto mode.
We will fix that in the next Release.

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.Services.AddAuthorizationCore();
builder.Services.AddCascadingAuthenticationState();
builder.Services.AddSingleton<AuthenticationStateProvider, PersistentAuthenticationStateProvider>();
builder.Services.AddFluentUIComponents();  // 👈

await builder.Build().RunAsync();

[deepx]

Many thanks for your sample.

You can add this line builder.Services.AddFluentUIComponents(); in the "second" Program.cs file (in BlazorApp4.Client project). This code is probably needed when the project is loaded using the WebAssembly part of the Auto mode. We will fix that in the next Release.

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.Services.AddAuthorizationCore();
builder.Services.AddCascadingAuthenticationState();
builder.Services.AddSingleton<AuthenticationStateProvider, PersistentAuthenticationStateProvider>();
builder.Services.AddFluentUIComponents();  // 👈

await builder.Build().RunAsync();

Looks like this fixed it. Thank you for your help on this.
best regards
DeepX

[svetovid]

I had the same issue in my Blazor unit tests, using bUnit framework.
If you had the same problem I have been struggling for some time, here is the solution:

• Register LibraryConfiguration in bUnit tests' service container like this

Services.AddSingleton(new LibraryConfiguration());

Of course, you can do it with Services.AddFluentUIComponents();, but if you mock some of the services , they will be discarded.
So minimal viable solution for me was just registering LibraryConfiguration

[paleocomburo]

I am running into exactly this issue using templates version 4.10.2.
Am I correct to assume the issue hasn't been fixed yet?

[vnbaaij]

No, the missing AddFluentUIComponents in the Client project has been dealt with in the PR mentioned above

[MarvinKlein1508]

@paleocomburo have you run dotnet new install Microsoft.FluentUI.AspNetCore.Templates to update your templates?

[paleocomburo]

@MarvinKlein1508 I installed the templates for the very first time today. Never used them.