Skip to content

Sidebar JS issue in 4.0.0 #1316

Description

@curtic00

This is shown in the log stream:

09-22T17:20:43.3021111Z fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
2026-09-22T17:20:43.3021656Z Unhandled exception in circuit 'KFlpGpXdRn1ZUguwIDtxmoHK1dlSye8CC82A_zLotG0'.
2026-09-22T17:20:43.3034059Z Microsoft.JSInterop.JSException: Could not find 'window.blazorBootstrap.sidebar.initialize' ('blazorBootstrap' was undefined).
2026-09-22T17:20:43.3034251Z E@https://www.*****.org/_framework/blazor.web.9hsif5t8mt.js:1:6757
2026-09-22T17:20:43.3034296Z resolveInvocationHandler@https://www.***.org/_framework/blazor.web.9hsif5t8mt.js:1:380
2026-09-22T17:20:43.303433Z processJSCall@https://www.*****.org/_framework/blazor.web.9hsif5t8mt.js:1:4441
2026-09-22T17:20:43.3034364Z beginInvokeJSFromDotNet@https://www.*****.org/_framework/blazor.web.9hsif5t8mt.js:1:4138
2026-09-22T17:20:43.3034546Z _invokeClientMethod@https://www.*****.org/_framework/blazor.web.9hsif5t8mt.js:1:69353
2026-09-22T17:20:43.3034592Z _processIncomingData@https://www.*****.org/_framework/blazor.web.9hsif5t8mt.js:1:66732
2026-09-22T17:20:43.3034626Z @https://www.*****.org/_framework/blazor.web.9hsif5t8mt.js:1:84431
2026-09-22T17:20:43.3034663Z at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, JSCallType callType, Object[] args)
2026-09-22T17:20:43.30347Z at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
2026-09-22T17:20:43.303477Z at BlazorBootstrap.BlazorBootstrapComponentBase.SafeInvokeVoidAsync(String identifier, Object[] args)
2026-09-22T17:20:43.3034803Z at BlazorBootstrap.Sidebar.OnAfterRenderAsync(Boolean firstRender)
2026-09-22T17:20:43.3034841Z at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:
Upgrade Balzor server app to version 4.0.0
run in Ubuntu web app

Expected behavior
Log stream should not show such error

Versions (please complete the following information):

  • .NET Version: .NET 10
  • BlazorBootstrap:4.0.0
  • Blazor Server: [e.g. WebAssembly, Server]
  • Blazor Interactive Render Mode: Server,
  • Blazor Interactivity Location: Global

Sample code
@inherits LayoutComponentBase

<Sidebar @ref="sidebar"
         Href="/"
         ImageSrc="../Manager.ico"
         Title="Simpson Jobs"
         DataProvider="SidebarDataProvider" />

<main>
    <div class="gDesktop bb-top-row px-4  justify-content-between ">
        <Icon Name="IconName.List" role="button" @onclick="ToggleSidebar"  />
        <AuthorizeView>
            <Authorized>
                Hello, @context.User.Identity?.Name!
                <a href="MicrosoftIdentity/Account/SignOut">Log out</a>
            </Authorized>
            <NotAuthorized>
                <a href="MicrosoftIdentity/Account/SignIn">Log in</a>
            </NotAuthorized>
        </AuthorizeView>
    </div>

    <article class="px-2">
        <div class="py-1">@Body</div>
    </article>
</main>

@code {
IEnumerable navItems = default!;
Sidebar sidebar = default!;

private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
{
    if (navItems is null)
        navItems = GetNavItems();

    return await Task.FromResult(request.ApplyTo(navItems));
}

private IEnumerable<NavItem> GetNavItems()
{
    navItems = new List<NavItem>
    {
        new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home"},
        new NavItem { Id = "MyDashBoard",  IconName = IconName.CardList, Text = "My DashBoard"},
        new NavItem { Id = "MyDashBoardBrowsing", Href = "/MyDashBoards/MyBrowsing",    IconName = IconName.CardList, Text = "Browsing",  ParentId ="MyDashBoard"},
        new NavItem { Id = "Jobs",  IconName = IconName.WrenchAdjustableCircleFill, Text = "Jobs...",    IconColor = IconColor.Primary},
        new NavItem { Id = "2", Href = "/Dashboard", IconName = IconName.CardList, Text = "DashBoard", ParentId ="Jobs"},
        new NavItem { Id = "3", Href = "/Jobs/SearchJobs", IconName = IconName.Search, Text = "Jobs: Search" , ParentId ="Jobs"},
        new NavItem { Id = "4", Href = "/Jobs/Latest", IconName = IconName.Table, Text = "Jobs: Latest", ParentId ="Jobs"},
        new NavItem { Id = "5", Href = "/Jobs/Status" , IconName = IconName.Database, Text = "Jobs: By Status", ParentId ="Jobs"},
        new NavItem { Id = "5T", Href = "/Jobs/Type" , IconName = IconName.Database, Text = "Jobs: By Type", ParentId ="Jobs"},
        new NavItem { Id = "5A", Href = "/Jobs/Create" , IconName = IconName.DatabaseFillAdd, Text = "Jobs: Create", ParentId ="Jobs"},
        new NavItem { Id = "Customers",  IconName = IconName.PeopleFill, Text = "Customers..." ,  IconColor = IconColor.Info},
        new NavItem { Id = "CustomerDetails", Href = "/Customers/CustomerDetails/" , IconName = IconName.PeopleFill, ParentId ="Customers" , Text = "Customers: Details" ,  IconColor = IconColor.Info},
        new NavItem { Id = "6",  Href = "/Customers/CustomerSearch"  , IconName = IconName.Search, Text = "Customers: Search", ParentId ="Customers" ,  IconColor = IconColor.Info },
        new NavItem { Id = "CompanyCreate",  Href = "/Customers/CustomerCreate"  , IconName = IconName.PlusCircleFill, Text = "Company: Create", ParentId ="Customers" ,  IconColor = IconColor.Info },
        new NavItem { Id = "IndividualCreate",  Href = "/Customers/IndividualCreate"  , IconName = IconName.PlusCircleFill, Text = "Individual: Create", ParentId ="Customers" ,  IconColor = IconColor.Info },
        new NavItem { Id = "CostManagement", IconName = IconName.CurrencyPound, Text = "Cost Management" ,  IconColor = IconColor.Danger},
        new NavItem { Id = "CostManagementInvoices", Href = "/Invoice/" , IconName = IconName.CashCoin, Text = "Invoicing" ,  IconColor = IconColor.Danger, ParentId ="CostManagement" },
        new NavItem { Id = "JobCostSummary", Href = "/CostManagement/JobCostSummary/" , IconName = IconName.CashCoin, Text = "Job Cost Summary" ,  IconColor = IconColor.Danger, ParentId ="CostManagement" },
        new NavItem { Id = "Admin", IconName = IconName.Gear, Text = "Admin" ,  IconColor = IconColor.Primary},
        new NavItem { Id = "Settings-WorkLogs", Class="jobCostSummary", Href = "/Settings/WorkLogs", IconName = IconName.WrenchAdjustableCircleFill, Text = "WorkLog Settings" , ParentId ="Admin"},
        new NavItem { Id = "Settings-Cache", Class="SettingsCache", Href = "/Settings/Cache", IconName = IconName.WrenchAdjustableCircleFill, Text = "Cache Settings" , ParentId ="Admin"}

    };
    return navItems;
}

private void ToggleSidebar() => sidebar.ToggleSidebar();

}

<style> :root { --bb-sidebar-width: 270px; --bb-sidebar-collapsed-width: 50px; --bb-sidebar-background-color: rgba(234, 234, 234, 1); --bb-sidebar-top-row-background-color: rgba(0,0,0,0.08); --bb-sidebar-top-row-border-color: rgb(194,192,192); --bb-sidebar-title-text-color: rgb(0,0,0); --bb-sidebar-brand-icon-color: #6f42c1; --bb-sidebar-brand-image-width: 24px; --bb-sidebar-brand-image-height: 24px; --bb-sidebar-title-badge-text-color: rgb(255,255,255); --bb-sidebar-title-badge-background-color: rgba(25,135,84,var(--bs-bg-opacity,1)); --bb-sidebar-navbar-toggler-icon-color: rgb(0,0,0); --bb-sidebar-navbar-toggler-background-color: rgba(0,0,0,0.08); --bb-sidebar-content-border-color: rgb(194,192,192); --bb-sidebar-nav-item-text-color: rgba(0,0,0,0.9); --bb-sidebar-nav-item-text-active-color-rgb: 0,0,0; --bb-sidebar-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9); --bb-sidebar-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9); --bb-sidebar-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08); --bb-sidebar-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08); } </style>

GitHub repo
GitHub repo with minimal code to reproduce the issue.

Desktop (please complete the following information):

  • OS: windows 10
  • Browser chrome, edge
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.
Playwright and Bunit test cases passed.
Does not seeeeeem to be any impact on application that I can tell
Did not see this in previous version of BB

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions