Blazor WebApp 9.1.0 Bundle Issues

[TheObliterator]

Is there an existing issue for this?

• I have searched the existing issues

Description

After upgrading my ABP Blazor WebApp from 9.0.0 to 9.1.0, I'm encountering issues with the new bundling system.
It seems like isolated CSS in my components aren't being bundled properly - the page displays correctly initially but then refreshes and the stylings are lost. I'm also getting jquery errors during login I didn't previously.

To test further, I tried creating a new ABP WebApp project in 9.0.0 and using abp update to update it to 9.1.0
After doing so, I encounter javascript errors during login.

`ReferenceError: Swal is not defined
Stack trace:

at https://localhost:44373/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js?_v=638767619480000000:3:5
at https://localhost:44373/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js?_v=638767619480000000:121:3`

I've read the migration guide (updated OpenIdidict) and the new Blazor bundling guide, but there doesn't seem to be anything new I need to do as part of the upgrade. Am I missing something?

Reproduction Steps

Create a Blazor WebApp in 9.0.0
Update it to 9.0.1 using abp update
Fix OpenIddict as per migration guide and add a new EF migration
Build
Try to login
Observe exceptions in js.

Expected behavior

Should function as per 9.0.0 without exceptions

Actual behavior

`ReferenceError: Swal is not defined
Stack trace:

at https://localhost:44373/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js?_v=638767619480000000:3:5
at https://localhost:44373/libs/abp/aspnetcore-mvc-ui-theme-shared/sweetalert2/abp-sweetalert2.js?_v=638767619480000000:121:3`

Regression?

9.0.0 worked fine.

Known Workarounds

No response

Version

9.1.0

User Interface

Blazor

Database Provider

EF Core (Default)

Tiered or separate authentication server

None (Default)

Operation System

Windows (Default)

Other information

No response

[maliming]

hi

Can you share your test project?

[leksts]

It seems like isolated CSS in my components aren't being bundled properly

This happens even with the default templates. To reproduce, use CLI version 0.9.24 to generate a Blazor WebApp project.

abp new Acme.BookStore -u blazor-webapp --theme leptonx-lite

Initially, when in InteractiveServer-mode, the Welcome card on the homepage loads fine.
After a refresh, when the application switches to InterActiveWebassembly-mode, the styles from Acme.BookStore.Blazor.Client/Pages/Index.razor.css are not loaded. We can see that because the background image positioning is off.

[TheObliterator]

@maliming I can upload a test project if it will help, but as @leksts notes this happens with the default template projects out of the box.
After upgrading the default project to 9.1.0 I get exceptions about missing js upon login and the css fails when it switches between the render mode.

[TheObliterator]

v9.1.0 Initial Render (correct):

v9.1.0 Interactive Render (missing isolated css):

v.9.1.0 Login page (js exception):

[maliming]

Thanks. I will check it.

[maliming]

hi

Please add these two lines to App.razor file.

<link href="Acme.BookStore.Blazor.styles.css" rel="stylesheet" />

<link href="Acme.BookStore.Blazor.Client.styles.css" rel="stylesheet" />

I will update the template.

Thanks

[maliming]

hi @TheObliterator

Can you share a test template project that can reproduce the JS error?

Thanks.

[jacekmichalski]

I've got exactly the same problem after upgrade in Blazor WebApp. When the rendermode changes from Server to Webassembly then the icons and styles are missing. There is something wrong with bundling because abp bundle command doesn't help

[TheObliterator]

@maliming Thanks,

Adding the css references resolves the isolated css issue.
Attached is a copy of the project with the js error upon loading the login page.

AbpSolution910.zip

[jacekmichalski]

hi

Please add these two lines to App.razor file.

<link href="Acme.BookStore.Blazor.styles.css" rel="stylesheet" />

<link href="Acme.BookStore.Blazor.Client.styles.css" rel="stylesheet" />

I will update the template.

Thanks

It only partialy solves the problem. There are no icons in menu.

[TheObliterator]

@jacekmichalski Good spot, yes icons still broken for me after interactive render despite the isolated css working.

[maliming]

Thanks, I will check your project.

[maliming]

hi

1. There is no JS error in the login page.

2. Update your AbpSolution1BundleContributor class, rebuild and run abp bundle command in Blazor.Client project, We fixed it in the next 9.1 patch version Remove InteractiveAuto check to add style files #22296

public class AbpSolution1BundleContributor : IBundleContributor
{
    public void AddStyles(BundleContext context)
    {
        context.Add("main.css", true);

        context.BundleDefinitions.Insert(0, new BundleDefinition
        {
            Source = "_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/bootstrap/css/bootstrap.min.css"
        });
        context.BundleDefinitions.Insert(1, new BundleDefinition
        {
            Source = "_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/css/all.css"
        });
    }
}