Blazor Hybrid

Note: The workaround below only applies to .NET 8 (and below). As of .NET 9 this workaround is no longer needed. If you have this workaround in place for .NET 9 your Blazor Hybrid project will not load.

It is possible to use this library in your Blazor Hybrid projects. Setup is almost the same as described in the "Getting started" section above, however to get everything to work you'll need to take one extra step:

Temporary workaround for MAUI/WPF/Windows Forms issues

Currently when using WebView to run Blazor (in all Hybrid variants), the web-components script is not imported automatically (see #404). There is also an issue with loading the custom event handlers that are being configured by the web-components script. Until these are fixed on the WebView side, there is a workaround available, namely to intercept '_framework/blazor.modules.json' and provide proper JS initializers (created by the build). The needed script is included in the general library script and needs to be included with a script tag before the _framework/blazor.webview.js script tag.

<script app-name="{NAME OF YOUR APP}" src="./_content/Microsoft.FluentUI.AspNetCore.Components/js/initializersLoader.webview.js"></script>
<script src="_framework/blazor.webview.js"></script>

The app-name attribute needs to match your app's assembly name - the script uses 'app-name' to resolve the name of the file with initializers. The 'initializersLoader' part of the script replaces the standard fetch function with one which provides the correct file in place of the empty blazor.modules.json. fetch is restored to its original state once the _framework/blazor.modules.json request is intercepted.

For more information regarding this bug, see issue 15234 in the MAUI repo.