search

microsoft / fluentui-blazor

Microsoft Fluent UI Blazor components library. For use with ASP.NET Core Blazor applications
https://www.fluentui-blazor.net
MIT License
3.3k stars 305 forks source link

fix: can not load page after update to v2.1.1 in Blazor wasm #338

Closed idea-lei closed 1 year ago

idea-lei commented 1 year ago

🐛 Bug Report

After I upgrade to v2.1.1, the wasm app might be not loaded (error in image). image

image

This will happen after I update to v2.1.1 and close visual studio and then reopen it (it works neither in debug mode, nor the published version). But when I downgrade to 2.0.5 (or 2.0.2 etc), it works well without any further change.

Here is my index.html

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>TestBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <link href="TestBlazor.styles.css" rel="stylesheet" />
    <link href="_content/Microsoft.Fast.Components.FluentUI/css/variables.css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <svg class="loading-progress">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
        <div class="loading-progress-text"></div>
    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="js/app.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components@2.1.1/dist/web-components.min.js"></script>
</body>

🌍 Your Environment

vnbaaij commented 1 year ago

Your index.html is fine. Is this a Server hosted application? If so, install the 2.1.1 package in the server project as well and try again please. Let me know if that works

idea-lei commented 1 year ago

@vnbaaij I will check it. as I mentioned it works when I downgrade it to v2.0.x. Now I just updated to v2.1.1 and it works well till now. I will let you know after trying your method if the problem happens again.

Besides: The project was Server hosted application, but I changed the server project to pure api project and in the program.cs there is no relevant config for blazor. So I would ask what makes blazor wasm a server hosted app? (I mean the key configuration in both blazor wasm and asp.net app.

thx

vnbaaij commented 1 year ago

The package just needs to be in the server project. No configuration needed. Installing it triggers copying some prop and targets files that makes things work. Still need to look deeper into it.

idea-lei commented 1 year ago

@vnbaaij after I install the fluent ui to server project, it's working well in debugging mode but I got this error in production env...

image

I don't understand why / what to do with ef... and how is ef unavailable... It became more complex...

vnbaaij commented 1 year ago

The package is not doing anything with EF. Something else in your project using it?

idea-lei commented 1 year ago

The package just needs to be in the server project. No configuration needed. Installing it triggers copying some prop and targets files that makes things work. Still need to look deeper into it.

It seems to work with your advice. I'm closing this issue, if the problem happens again, I would like to reopen it again.

thank you

MaratGallyamov commented 1 year ago

why not publishing this in docs? maybe in breaking change section?

vnbaaij commented 1 year ago

It was a bug in 2.1.1 and is fixed in 2.1.2. It was not a breaking change.

MaratGallyamov commented 1 year ago

I still need to add it to server project, which I haven't before 2.1. So, seems like a breaking change

MaratGallyamov commented 1 year ago

Publish settings for icons and emojis also must be in server project:

true 12,16,20 Filled,Regular
vnbaaij commented 1 year ago

Are you talking about the server part of a hosted web assembly app? If so, you definitely do not need to set those project properties in the server project. Also, are you using the latest (2.1.2) package?

MaratGallyamov commented 1 year ago

Yes, I am talking about that. I already figured it out. My point is I didn't have anything in server project before updating to 2.1. And now I have to. So this is a breaking change. Update docs saying "Make sure you add those project properties to server project". Otherwise, how is it obvious?

vnbaaij commented 1 year ago

Update docs saying "Make sure you add those project properties to server project". Otherwise, how is it obvious?

Can you please tell me where you found it stated like that?