fix: Post FluentUI updrade getting Error "TypeError:- Failed to fetch dynamically imported module: https://{application url}/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js"

[v-malvankars]

🐛 Bug Report

We upgraded FluentUI from version 3.0.1 to 4.12.0. It's working fine on localhost environment. But when we deployed it on our higher

environment, we are getting below errors:

1. GET https://{application url}/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.exfvxuochq.bundle.scp.css net::ERR_ABORTED 403 (Forbidden)
blazor.server.js:1 
2. GET https://{application url}/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js net::ERR_ABORTED 403 (Forbidden)
(anonymous) @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
importInitializersAsync @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
await in (anonymous)
Pr @ blazor.server.js:1
await in Pr
Ar @ blazor.server.js:1
Br @ blazor.server.js:1
(anonymous) @ (index):66
blazor.server.js:1  
3. Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: 

💻 Repro or Code Sample

It's working fine on localhost environment. But when we deployed it on our higher environment, we are getting mentioned errors.

🤔 Expected Behavior

The fluent-ui assets should load normally.

😯 Current Behavior

I get these errors in my browser console:

1. https://{application url}/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.exfvxuochq.bundle.scp.css net::ERR_ABORTED 403 (Forbidden)
2. https://{application url}/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js net::ERR_ABORTED 403 (Forbidden)
3. Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://{application url}/_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js

🔦 Context

I am stuck at the moment because of this issue.

🌍 Your Environment

OS & Device: Windows
Browser: Microsoft Edge, Google Chrome
.NET library Version: 8.0
Fluent UI Blazor library Version: 4.12.0

[vnbaaij]

We are not going to be able to help you without seeing some code.

If you can't share code, maybe create a site with our templates and compare the generated code with your own code to find out where it is different.

Moving this to the discussion area as it is not a library issue but an implementation issue. YOu might be able to get more community help there if you can supply more details.

[v-malvankars]

Hello @vnbaaij , we followed instructions mentioned https://baaijte.net/blog/microsoft-fluentui-aspnetcore.components-4/ to upgrade FluentUI from version 3.0.1 to 4.12.0, but still we are facing the issue as explained above. Please find below some of the code files(other than components) where we made upgrade related changes.

Program.cs (with some of my services omitted)

using Microsoft.AspNetCore.Hosting.StaticWebAssets;
using Microsoft.CoheranceDesign.Blazor;
using MSC.Application.Common;
using MSC.Infrastructure;
using MSC.Infrastructure.Logging;
using Serilog;

ConsoleLogger.InitializeLogging();
Log.Information("Starting Blazor app...");

try
{
    var builder = WebApplication.CreateBuilder(args);

    **----------------Added this line while troubleshooting mentioned issue.-----------------
    StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment, builder.Configuration);**

    //Add key vault to the configuration and get the secrets
    if (builder.Environment.IsDevelopment())
    {
        ////builder.Configuration.AddUserSecrets("sample");
    }
    else
    {
        builder.AddKeyVault();
    }
    AppConfig config = new AppConfig(builder);

    //Add the required services for the server app
    builder.AddInfrastructure(config);
    builder.ConfigureApiVersioning(config);
    //Blazor server app uses the coherence design library. Add the required services
    **builder.Services.AddBlazorCoherence(builder);----------------Please refer ServiceExtension.cs for this part of code**

    var app = builder.Build();
    app.UseInfrastructure(config);

    //start the app
    app.Run();
}
catch (Exception ex) when (!ex.GetType().Name.Equals("StopTheHostException", StringComparison.Ordinal))
{
    //catch the fatal exception and log it
    ConsoleLogger.InitializeLogging();
    Log.Fatal(ex, "Fatal exception");
}
finally
{
    //close the logger
    ConsoleLogger.InitializeLogging();
    Log.Information("Blazor app Shutting down...");
    Log.CloseAndFlush();
}

ServiceExtension.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.FluentUI.AspNetCore.Components;
using Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip;

namespace Microsoft.CoheranceDesign.Blazor;

public static class ServiceExtension
{
    public static void AddBlazorCoherence(this IServiceCollection services, WebApplicationBuilder builder)
    {
        //Make sure to call this after adding the following call in the blazor app.

        builder.Services.AddRazorPages();
        builder.Services.AddHttpClient("BlazorClient", client =>
        {
            client.DefaultRequestHeaders.Add("User-Agent", "MSC/1.0");
        });

        builder.Services.AddServerSideBlazor(options =>
        {
            options.DisconnectedCircuitRetentionPeriod = TimeSpan.FromMinutes(6);
            options.JSInteropDefaultCallTimeout = TimeSpan.FromMinutes(3);
        });

        **----------------Removed HostingModel configuration from this function as its discarded in v4 code-----------------------**
        services.AddFluentUIComponents();

        builder.Services.AddScoped<ITooltipService, TooltipService>();
        services.AddScoped<CoheranceDesign.ToastService>();
    }
}

_Host.cshtml(shared only those lines which are modified due to v4 changes)

    **----------------Added this line while troubleshooting mentioned issue.-----------------**
    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async nonce="----------"></script>
    <script src="_content/Microsoft.CoheranceDesign.Blazor/lib/sql-formatter/sql-formatter.min.js" type="text/javascript" nonce="----------"></script>
    <script src="_content/BlazorMonaco/jsInterop.js" type="text/javascript" nonce="----------"></script>
    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js" type="text/javascript" nonce="----------"></script>
    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js" type="text/javascript" nonce="----------"></script>
    <script src="_content/Microsoft.CoheranceDesign.Blazor/js/microsoft-cds-blazor.js" asp-append-version="true" charset="utf-8" nonce="----------"></script>
    <script src="_framework/blazor.server.js" autostart="false" type="text/javascript" charset="utf-8" nonce="----------" ></script>
    <script nonce="----------">
        document.addEventListener("DOMContentLoaded", function () {
            window.tabID = '@Guid.NewGuid()'
            Blazor.start();
        });
    </script>

Please have a look and if possible share some pointers which we can try to proceed on the path of resolving this issue.
Also please let us know if it's possible for you/your team to have quick call with us as per your time.
Thanks!

[vnbaaij]

Please reach out internally on Teams to set up a meeting

[V-AATARE]

Hi @vnbaaij ,
We have followed all the guideline to upgrade the 3.0.1 to 4.12.0.
It was working with 3.0.1 and it's loading under source as well in dev tools

but after upgradation, it's (Microsoft.FluentUI.AspNetCore.Components) missing under _content folder

Your pointers will be highly appreciated.
@v-malvankars already mentioned the steps that we have taken.

Thanks in advance.

[vnbaaij]

If we can't see the results of the steps you took, we can't help you. It is just a guessing game at this point.

I'm not seeing any of the Fluent files in your screenshot. This is not something we regularly hear going wrong.

[v-malvankars]

If we can't see the results of the steps you took, we can't help you. It is just a guessing game at this point.

I'm not seeing any of the Fluent files in your screenshot. This is not something we regularly hear going wrong.

@vnbaaij , We can't see the Fluent files post upgrade coz those files are blocked and giving 403 forbidden error as mentioned above.

So we need your help to unblock them, so that those can be loaded.

[vnbaaij]

It is not us blocking anything. This is coming from the server where it is being hosted on.

Also use the information at https://www.fluentui-blazor.net/UpgradeGuide to see if anything was missed.