Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.3k stars 533 forks source link

[Bug]: Blazorise doesn't work on .NET 8 Blazor Server App #4991

Closed Navusas closed 8 months ago

Navusas commented 1 year ago

Blazorise Version

1.3.1

What Blazorise provider are you running on?

None

Link to minimal reproduction, or a simple code snippet

App.razor


@using Blazorise
<!DOCTYPE html>
<html lang="en">
Domgie.App Not found

Sorry, there's nothing at this address.

@code { private Theme _theme = new Theme { BodyOptions = new ThemeBodyOptions { BackgroundColor = "#0e1117", TextColor = "#d9d9d9", },

    IsGradient = true,
    IsRounded = true,
    ColorOptions = new ThemeColorOptions
    {
        Primary = "#b700ff",
        Secondary = "#dedede",
        Danger = "#a3020c",
        Success = "#238636",
        Info = "#466dc2"
    },
    #region Sidebar
    // Sidebar
    BarOptions = new ThemeBarOptions
    {
        HorizontalHeight = "64px",
        LightColors = new ThemeBarColorOptions
        {
            ItemColorOptions = new ThemeBarItemColorOptions
            {
                ActiveBackgroundColor = "#dedede",
                ActiveColor = "#000000",
                HoverBackgroundColor = "#dedede",
                HoverColor = "#000000",
            },
        },
        DarkColors = new ThemeBarColorOptions
        {
            BackgroundColor = "#161b22",
            ItemColorOptions = new ThemeBarItemColorOptions
            {
                ActiveBackgroundColor = "#0e1117",
                ActiveColor = "#dedede",
                HoverBackgroundColor = "#2e2e2e",
                HoverColor = "#818487",
            },
            Color = "#dedede",
            GradientBlendPercentage = 10,
        }
    },
    #endregion

    ListGroupItemOptions = new ThemeListGroupItemOptions
    {
        BackgroundLevel = 10,
    },

    BackgroundOptions = new ThemeBackgroundOptions
    {
        Body = "#0e1117",
        Primary = "#0e1117",
        Secondary = "#161b22",
            Info = "#466dc2"
    },
    TextColorOptions = new ThemeTextColorOptions
    {
        Primary = "#d9d9d9",
        Secondary = "#b700ff",
            Light = "#ebebeb"
    },
    InputOptions = new ThemeInputOptions
    {
        CheckColor = "#dedede",
    },
    TableOptions = new ThemeTableOptions
    {
        BackgroundLevel = -6
    },
};

}


> Program.cs
```csharp
using Blazorise;
using Blazorise.Bootstrap5;
using Blazorise.Icons.FontAwesome;
using Domgie.App;
using Domgie.Domain.Data;
using Domgie.Domain.Services;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

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

builder.Services
    .AddBlazorise(options =>
    {
        options.Immediate = true;
        options.ProductToken = "<REDACTED>";
    })
    .AddBootstrap5Providers()
    .AddFontAwesomeIcons();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // 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.MapRazorComponents<App>();

app.Run();

Steps to reproduce

Follow Blazorise instructions to install it:

  • Inject into Program.cs
  • Add ThemeProvider around Router
  • Add Blazorise to _Imports
  • Run

What is expected?

App to work the way it was working with .NET 7 , without me doing anything else, like allowing SynchronousIO.

What is actually happening?

Throws bunch of different exceptions and doesnt work at the end of the day anyways.

What browsers are you seeing the problem on?

No response

Any additional comments?

I have tried to upgrade my project from .NET 7 to .NET 8 (Blazor Server WebApp), but keep hitting various issues and blockers while doing that.

I haven't changed anything during migration, when it comes to Blazorise itself.

At first, I spent time figuring out why I was getting this error (stack trace was useless):

InvalidOperationException: Synchronous operations are disallowed. Call WriteAsync or set AllowSynchronousIO to true instead.

And that is because of me using ThemeProvider ir App.razor:

<Blazorise.ThemeProvider Theme="theme">
    <Router AppAssembly="@typeof(App).Assembly">
    ...
    </Router>
</Blazorise.ThemeProvider>

Figured out this can be "fixed" by allowing synchronous IO in Program.cs like this:

 builder.Services.Configure<KestrelServerOptions>(options =>
 {
     options.AllowSynchronousIO = true;
 });

But even with this, Blazorise is not working as expected. When I try to access it through URL, the Layout / Sidebar doesn't work. The _context.Blazorise.blazorise.css and others also cannot be find....

Anybody else having these issues? If no, any idea what I could be doing wrong?

stsrki commented 1 year ago

We have actually noticed the same issue ourselves while migrating to .NET8. Branch https://github.com/Megabit/Blazorise/tree/rel-1.2-net8-docs-v2/Documentation

For now, we have paused migration until RC1 is released, hopefully fixing an issue. After that, we will try again and let you know of the results.

Navusas commented 1 year ago

RC1 has been released https://devblogs.microsoft.com/dotnet/announcing-dotnet-8-rc1/

Tried it out, and it seems that those issues I mentioned are no longer present.

Despite that, for some reason the sidebar isn't showing up anymore (and I haven't changed anything, compared to the .NET 7 version). Will try to look further into it tomorrow, to see if it isn't just some silly mistake I made somewhere.

David-Moreira commented 1 year ago

If I remember correctly from when we were testing, stuff in the Layout pages also has to be made "dynamic" and that's why it does not show up, it's just being treated as static content. I think we achieved that by wrapping the Router component and assigning it one of the new render mode options. But maybe there's a better approach or we were also missing some configuration ourselves.

Let us know your findings. Thanks!

stsrki commented 1 year ago

There is a note on the RC1 blog post mentioning why some things cannot work dynamically.

image

buvinghausen commented 12 months ago

@stsrki just checking in with .NET 8 going RTM today I have been wanting to put together a working PoC with Blazorise & the new server/stream rendering functions.

stsrki commented 12 months ago

We're preparing the 1.3.3 release with .NET 8 RTM.

buvinghausen commented 12 months ago

@stsrki awesome news!