fix: [application build fails] in [trying to use dialog component in a server application] #1787

Closed kimt0t0 closed 7 months ago

🐛 Bug Report

Hi there !

We are benchmarking your library with a bunch of others at my work (I'm writing from my personal account, we use GitLab in our professional environment). I was trying to use a dialog component before validating a form in a blazor app on the server side. When trying to compile the app again I got an error saying that the DialogService couldn't be found, so I just couldn't open my application. After several tests with a senior developer, we tried to just follow again your official tutorial step by step. We imported the FluentUIComponents in Program.cs as specified, checked that we have an InteractiveServer rendermode, and when we try to launch the application the error pops out again (without even creating the components).

When we copy-paste one of your examples in our existing code we still get the same problem.

💻 Repro or Code Sample

In Program.cs:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

`builder.Services.AddFluentUIComponents();`

builder.Services.AddMemoryCache();
builder.Services.AddScoped<CharacterService>();
builder.Services.AddScoped<CharacterStateContainer>();
builder.Services.AddScoped<Microsoft.FluentUI.AspNetCore.Components.LibraryConfiguration>();

var app = builder.Build();

I also tried to add the Service itself manually: builder.Services.AddScoped<DialogService>(); or builder.Services.AddScoped<IDialogService>();

Those two solutions fail as well and prevent the code from being fully generated.

In MainLayout:

@inherits LayoutComponentBase
@rendermode InteractiveAuto

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
        **<FluentDialogProvider />**
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

🤔 Expected Behavior

The DialogService should be detected by the application and we should be able to call a dialog component in a server app page.

😯 Current Behavior

If the service is imported manually in addition to the adviced way to call it: The code cannot be compiled, we get an error saying that the application's build failed because the DialogService couldn't be found.

If we just add the FluentUIComponents as recommanded: The code is compiled, but when the application is opened in the browser we get an error message saying that the DialogService couldn't be found.

🔦 Context

We are testing a bunch of UI libraries before we start a new project and we need this dialog box as it is asked by our clients to validate specific forms. In our project (which connects a bunch of solutions together) the dialog component breaks the entire application at the moment. I couldn't find similar issues on GitHub or StackOverflow.

🌍 Your Environment

Due to my job I cannot share a lot of details about my environment.

OS: Windows
Browser [Firefox]
.NET8, Blazor Hybrid (Server + Client), Fluent UI 4.5.0.

As can be seenon the demo site, this definitely works. As you already say, there are no open issues on that here. Only conclusion I can make is that there is an erro in your setup/configuration.

With the limited amount of code, I can only make a guess....

Did you include the using for the namespage in _Imports.razor?

There is no use in including the services manually. AddFluentUIComponents does that or you.

I woud advise you to install our templates, create a new project from there and try it eiter in that project or compare it to your own project to spot and repair the errors.

microsoft / fluentui-blazor