FluentMenu , FluentMenuButton can not show in blazor server project

[tayzartun2015github]

I was used FluentMenuButton or FluentMenu object in my blazor-server project. ,When I run my app, following error mesage displayed in browser console.
System.ArgumentNullException: needs to be added to the main layout of your application/site. (Parameter 'UseMenuService')
at Microsoft.FluentUI.AspNetCore.Components.FluentMenu.OnInitialized() in /_/src/Core/Components/Menu/FluentMenu.razor.cs:line 194
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

FluentMenuProvider tag was already declared in MainLayout.razor file at the end of file. I was asked copilot , but error is still existing. So how do i use FluentMenu or FluentMenuButton, please help me ?

Program.cs

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Fast.Components.FluentUI.DesignTokens;
using Microsoft.FluentUI.AspNetCore.Components;
using Microsoft.JSInterop;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

builder.Services.AddServerSideBlazor().AddCircuitOptions(options =>
{
    options.DetailedErrors = true;
}); 


builder.Services.AddFluentUIComponents();
 

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

-- in Routes.razor file

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

in Home.Razor file

@page "/"
@rendermode InteractiveServer 


<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new Fluent Blazor app.
<FluentButton Id="testButton" OnClick="@(() => open2 = !open2)">
    Open Test Menu
</FluentButton>
<FluentMenu Anchor="testButton" Anchored="true" @bind-Open="open2">
    <FluentMenuItem>Test Item 1</FluentMenuItem>
    <FluentMenuItem>Test Item 2</FluentMenuItem>
</FluentMenu>

<FluentMenuButton @ref=menubutton ButtonAppearance="@Appearance.Stealth" Text="Select an item" IconStart="new Icons.Regular.Size16.Globe()" Items="@items"></FluentMenuButton>

@code {
        private bool open2 = false;
private FluentMenuButton menubutton = new();
    private Dictionary<string, string> items = new Dictionary<string, string>()
    {
        {"1","Item 1"},
        {"2","Item 2"},
        {"3","Item 3"},
        {"4","Item 4"},
    };
  }

MainLayout.razor

@inherits LayoutComponentBase
    <FluentLayout >
        <FluentHeader> Fluent Ui App  <FluentSpacer /> Aligned to the end </FluentHeader>
        <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
            <FluentNavMenu Id="main-menu" Width="250" Collapsible="true" Title="Navigation menu" @bind-Expanded="expanded" >
                <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
                <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
                <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
            </FluentNavMenu>
            <FluentBodyContent Class="body-content">
                <div class="content">
                    @Body
                </div>
            </FluentBodyContent>
        </FluentStack>
        <FluentFooter>
            <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
            <FluentSpacer />
            <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
        </FluentFooter>
    </FluentLayout>

    <div id="blazor-error-ui" data-nosnippet>
        An unhandled error has occurred.
        <a href="." class="reload">Reload</a>
        <span class="dismiss">🗙</span>
    </div>
<FluentMenuProvider />
<FluentToastProvider />
<FluentDialogProvider />
<FluentTooltipProvider />
@code {
    private bool expanded = true;

}

[vnbaaij]

You need to use 3 ``` to start a code block in your posts (or use the toolbar to format your text). This is not really readable.

[tayzartun2015github]

Sorry sir,
I’m not entirely sure how to use it because I just posted (for the first time) on GitHub. Can I close this post and upload a new one instead? If possible, I will post again.

[vnbaaij]

No worries! You should be able to edit your exiting post

[tayzartun2015github]

@vnbaaij I've edited the post. Please review it again.

[tayzartun2015github]

@vnbaaij Hello sir, I found a solution. When I changed my project's interactivity location to Global. It's work. (If interactivity location is per page/component , it does not work for me) Thank you sir