I am using Microsoft.FluentUI.AspNetCore.Components in version 4.11.8 and Blazored.LocalStorage in version 4.5 in Blazor WAM Standalone App.
When I do not use Blazored.LocalStorage, e.g. ILocalStorageService with Get/SetItemAsStringAsync at all, everything in FluentUI works fine.However when I use Blazored.LocalStorage in either Program.cs or in a component, it breaks FluentUI.
The error messages look like this
Unhandled exception rendering component: Value cannot be null. (Parameter 'jsObjectReference') System.ArgumentNullException: Value cannot be null. (Parameter 'jsObjectReference') at System.ArgumentNullException.Throw(String paramName) at System.ArgumentNullException.ThrowIfNull(Object argument, String paramName) at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args) at Microsoft.FluentUI.AspNetCore.Components.FluentDivider.OnAfterRenderAsync(Boolean firstRender) in /_/src/Core/Components/Divider/FluentDivider.razor.cs:line 44 at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)or
System.ArgumentNullException: Value cannot be null. (Parameter 'jsObjectReference') at System.ArgumentNullException.Throw(String paramName) at System.ArgumentNullException.ThrowIfNull(Object argument, String paramName) at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeAsync[String](IJSObjectReference jsObjectReference, String identifier, Object[] args) at Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.OnAfterRenderAsync(Boolean firstRender) in /_/src/Core/Components/KeyCode/FluentKeyCode.razor.cs:line 137 at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState) System.ArgumentNullException: Value cannot be null. (Parameter 'jsObjectReference') at System.ArgumentNullException.Throw(String paramName) at System.ArgumentNullException.ThrowIfNull(Object argument, String paramName) at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeAsync[String](IJSObjectReference jsObjectReference, String identifier, Object[] args) at Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.OnAfterRenderAsync(Boolean firstRender) in /_/src/Core/Components/KeyCode/FluentKeyCode.razor.cs:line 137 at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)Is this a known issue? I do not know how to debug this further, except to narrow it down to this: When I do not use Blazored.LocalStorage as either a component or in Program.cs everything works as intended.
Edit:Blazored.LocalStorage might not be the culprit here. Reducing this to an MWE, I found out, this only happens, when I enable logging via Serilog in Program.cs:
var logLevelSwitch = new LoggingLevelSwitch(Serilog.Events.LogEventLevel.Verbose);var logger = new LoggerConfiguration() .MinimumLevel.ControlledBy(logLevelSwitch) .Enrich.WithProperty("InstanceId", Guid.NewGuid().ToString("n")) .WriteTo.BrowserConsole() .CreateLogger();builder.Services.AddLogging(configure =>{ configure.ClearProviders(); configure.AddSerilog(logger, true);});However this makes me none the wiser having this MWE.
Edit2: I was able to solve it, it seems that Serilog.Sinks.BrowserConsole adds its own implementation of IJSRuntime if it is not passed explicitly.