Blazor fluent ui DialogService, <FluentDialogProvider/> error

Question

I am using .net8 and blazor with Fluent UI library and I get an error that no provider is found even though I added it to App.razor at the end of MainLayout.

Program.cs

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

App.razor

<script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>

MainLayout.razor

<FluentLayout>
    <FluentHeader>
        <Header/>
    </FluentHeader>

    <FluentStack Orientation="Orientation.Horizontal" Width="100%" Class="page--container">
        <NavMenu/>

        <FluentBodyContent>
            @Body
        </FluentBodyContent>
    </FluentStack>
</FluentLayout>

<FluentDialogProvider/>
<FluentToastProvider/>
<FluentTooltipProvider/>

Header.razor

[Inject] public IDialogService DialogService { get; set; }

private async Task ToggleThemeHandler()
{
    var dialog = DialogService.ShowDialogAsync<MenuPanel>(new DialogParameters
    {
        Alignment = HorizontalAlignment.Right
    });
    await dialog;
}

MenuPanel.razor

@implements IDialogContentComponent

<FluentDialogBody>
    Menu
</FluentDialogBody>

IDE Console

Unhandled exception rendering component: <FluentDialogProvider /> needs to be added to the main layout of your application/site. (Parameter 
'OnShowAsync')

System.ArgumentNullException: <FluentDialogProvider /> needs to be added to the main layout of your application/site. (Parameter 'OnShowAsyn
c') at Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowDialogAsync[TData](Type dialogComponent, TData data, DialogParameters param
eters) in /_/src/Core/Components/Dialog/Services/DialogService-Dialog.cs:line 17 at Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowDialogAsync[TDialog](DialogParameters parameters) in /_/src/Core/Components/Dialog/Services/DialogService-Dialog.cs:line 35 at Components.Layouts.MainLayout.Components.Header.ToggleThemeHandler() in **\Components\Layouts\MainLayout\Components\Header.razor:line 36

Answer 1

Quote from the fluentui docs.

For the <FluentDialogProvider/> to work properly, it needs interactivity! If you are using "per page" interactivity or Server Side Rendering (ASP.NET Core 8 or above), make sure to add a @rendermode to either the provider itself or the component the provider is placed in.

So, you need to declare a @rendermode on the MainLayout.razor component, as mentioned on @Alamkanambra's answer

And/or on the <FluentDialogProvider> component like so.

<FluentDialogProvider @rendermode="RenderMode.InteractiveServer" />

---

Also, looking at the examples here seems like the dialog provider needs to be placed within the layout like so.

<FluentLayout>
    <FluentHeader>
        <Header/>
    </FluentHeader>

    <FluentStack Orientation="Orientation.Horizontal" Width="100%" Class="page--container">
        <NavMenu/>

        <FluentBodyContent>
            @Body
            <FluentDialogProvider @rendermode="RenderMode.InteractiveServer"/>
            <FluentToastProvider/>
            <FluentTooltipProvider/>
        </FluentBodyContent>
    </FluentStack>
</FluentLayout>