Fix For: Missing LibraryConfiguring Injection in DesignToken.razor.cs

[TimonFeldmann]

🐛 Bug Report

This issue occurs exclusively in version 4.9.2, downgrading to 4.9.1 resolves the issue.

When injecting any design token and calling .SetValue() with any element reference, the DesignToken class fails to inject the registered LibraryConfiguration causing an Object reference not set to an instance of an object exception to be thrown inside UrlFormatterExtensions.cs.

💻 Repro or Code Sample

Component:

@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens

<div class="container">
	<FluentTextField @ref="Test" @bind-Value=Title></FluentTextField>
</div>

@code {
	[Parameter, EditorRequired]
	public string Title { get; set; } = null!;

	FluentTextField Test;

	[Inject]
	private Density _density { get; set; } = default!;

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (firstRender)
		{
			await _density.SetValueFor(Test.Element, 10);

			StateHasChanged();
		}
	}
}

Startup:

    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            builder.Services.AddMauiBlazorWebView();
	    builder.Services.AddHttpClient();
            builder.Services.AddFluentUIComponents();

#if DEBUG
            builder.Services.AddBlazorWebViewDeveloperTools();
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }

🤔 Expected Behavior

Calling .SetValue() on any DesignToken should not throw a null reference exception.

😯 Current Behavior

LibraryConfiguration is injected as null into DesignToken.razor.cs causing a null reference exception when attempting to set any DesignToken value.

🌍 Your Environment

• OS & Device: Windows
• .NET MAUI desktop application
• .NET and Fluent UI Blazor library Version: .NET 8 / Fluent UI 4.9.2

[TimonFeldmann]

I went ahead and checked out this repository to see if I could find the issue and I was able to locate the issue and confirm the fix locally.

It appears there was an existing DI constructor in DesignToken which set the IJSRuntime, but not the LibraryConfiguration which was introduced in 4.9.2.

I modified the constructor for DesignToken as well as the DesignTokenGenerator to add the DI for LibraryConfiguration for all design tokens:

Fix is included in #2426

[marqdouj]

fwiw, I just tried creating a WPF/Blazor Hybrid

I figured I would try and replace the bootstrap with FluentUI-Blazor.
When I did, the app would not run and I got the 'LibraryConfiguration' error.

So I added the fix to the MainWindow constructor and it worked:

var serviceCollection = new ServiceCollection(); serviceCollection.AddWpfBlazorWebView(); serviceCollection.AddSingleton(new LibraryConfiguration() { CollocatedJavaScriptQueryString = null, }); Resources.Add("services", serviceCollection.BuildServiceProvider());