Azure App Service, dotnet 9 - FluentDesignTheme Component, Cannot read properties of undefined (reading 'clearLocalStorage')

[Lindsay-Mathieson]

Have a basic FluentUI Web App that we host in Azure App Service (linux runtime). Everything works fine when hosting/using DotNet 8 runtime.

I upgraded the App to Dotnet 9 - runs fine on my dev pc (Windows, VS 2022, Aspire project). But when I publish to Azure App Service, that has dotnet 9 runtime, we just get a blank page for the app and the app service log stream shows the following:

2024-12-04T01:47:03.913485901Z warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
2024-12-04T01:47:03.913523902Z       Unhandled exception rendering component: Cannot read properties of undefined (reading 'clearLocalStorage')
2024-12-04T01:47:03.913537302Z       TypeError: Cannot read properties of undefined (reading 'clearLocalStorage')
2024-12-04T01:47:03.913548602Z           at ClearLocalStorage (https://dynamicconnectadmin-testing.azurewebsites.net/_content/Microsoft.FluentUI.AspNetCore.Components/Components/DesignSystemProvider/FluentDesignTheme.razor.js?v=4.10.4.24318:48:30)
2024-12-04T01:47:03.913556702Z           at Module.addThemeChangeEvent (https://dynamicconnectadmin-testing.azurewebsites.net/_content/Microsoft.FluentUI.AspNetCore.Components/Components/DesignSystemProvider/FluentDesignTheme.razor.js?v=4.10.4.24318:23:13)
2024-12-04T01:47:03.913564102Z           at https://dynamicconnectadmin-testing.azurewebsites.net/_framework/blazor.web.js:1:2900
2024-12-04T01:47:03.913570802Z           at new Promise (<anonymous>)
2024-12-04T01:47:03.913578202Z           at w.beginInvokeJSFromDotNet (https://dynamicconnectadmin-testing.azurewebsites.net/_framework/blazor.web.js:1:2857)
2024-12-04T01:47:03.913584803Z           at vn._invokeClientMethod (https://dynamicconnectadmin-testing.azurewebsites.net/_framework/blazor.web.js:1:65750)
2024-12-04T01:47:03.913592203Z           at vn._processIncomingData (https://dynamicconnectadmin-testing.azurewebsites.net/_framework/blazor.web.js:1:63139)
2024-12-04T01:47:03.913599303Z           at connection.onreceive (https://dynamicconnectadmin-testing.azurewebsites.net/_framework/blazor.web.js:1:56780)
2024-12-04T01:47:03.913606503Z           at i.onmessage (https://dynamicconnectadmin-testing.azurewebsites.net/_framework/blazor.web.js:1:80728)
2024-12-04T01:47:03.913623603Z       Microsoft.JSInterop.JSException: Cannot read properties of undefined (reading 'clearLocalStorage')

Switch back to dotnet 8, it all works ok.

No idea why Azure hosting would be different.

[spmonahan]

I've searched the Fluent repo for "clearLocalStorage" (case-insensitively) and got no results so the offending code doesn't seem to belong to Fluent itself.

From your stack trace I'd start looking here, which seems to be in Blazor:

ClearLocalStorage (https://dynamicconnectadmin-testing.azurewebsites.net/_content/Microsoft.FluentUI.AspNetCore.Components/Components/DesignSystemProvider/FluentDesignTheme.razor.js?v=4.10.4.24318:48:30)

[Lindsay-Mathieson]

Thanks for checking that!

I did figure it out in the end - was publishing using a github workflow, then I tried pushing via a direct publish from Visual Studio, that worked perfectly.

Not sure what the issue was with my github workflow script, but I ended up recreating it from a template and that works as well now.

nb. The Server timeout/reconnect issues are much improved on dotnet 9, seems to take much longer (hours) to lose connection and automatically reconnects seamlessly when you switch back too the browser.