Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'removeAttribute') while implementing Settings as in example using the new .net8 template

[satyajit-behera]

Hi,

Need one help in implementing the settings, as given in example.

Copied the files as above in js folder in the client project in blazor using .net 8.

and changed the path for import:

import {
    baseLayerLuminance,
    StandardLuminance
} from "_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js";

And then copied the SiteSettings.razor and SiteSettingsPanel.razor as it's in the example in the Client project.
And @rendermode InteractiveServer is set for SiteSettings.razor. Without this, the settings window does not display.

When I run the application, window is displayed but i get the following error in the browser:

Error: Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'removeAttribute')
TypeError: Cannot read properties of null (reading 'removeAttribute')
    at switchHighlightStyle (https://localhost:7169/js/theme.js:47:54)
    at setInitialBaseLayerLuminance (https://localhost:7169/js/theme.js:83:9)
    at https://localhost:7169/js/theme.js:87:1
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at FluentUISample.WebApp.Client.Components.SiteSettingsPanel.OnAfterRenderAsync(Boolean firstRender) in D:\Projects\Samples\FluentUISample\FluentUISample.WebApp.Client\Components\SiteSettingsPanel.razor.cs:line 59
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Can anyone help to identify and resolve this issue.

Thanks

[dvoituron]

In a few days, you'll be able to use #1093

[satyajit-behera]

Thanks

[vnbaaij]

I'm guessing you current sample is based on the dev branch? If so, then you are seeing a newer way of including the web components script (with the .lib.module.js file) which does not work for you yet. Therefore the import does not work and you'll get the error. I think you can get it to work if you do the import from _content/Microsoft.FluentUI.AspNetCore.Components/js/web-components-v2.5.16.min.js
Or, as Denis, said, wait a few days...

[satyajit-behera]

Thanks. Same error. Anyway, new control looks very exciting. Will eagerly wait for the same. Any planned date for the release?

[vnbaaij]

Soon™️

[satyajit-behera]

@dvoituron @vnbaaij Thanks a lot. Its working very nice with the new release. And it was so quick. You all are amazing. Wish you a huge success.

[dvoituron]

Have you yet watched this small Tutorial I recorded (to check if you have all the components)?
https://youtu.be/EyGKOPiT4z0

Did you include <FluentDesignTheme StorageName="theme" /> in your MainLayout page, as explained at 2:20 timestamp?

[satyajit-behera]

Thanks @dvoituron Have done this, still getting the issue. Will go through the video and try. It might be because of the new template in .net 8 for both server and client rendering in one solution.

[satyajit-behera]

After debugging, found this observation. It's related to the value of theme in the local storage. On page load its
theme: {"mode":null,"primaryColor":null}

After settings are changed it was:
theme: {"mode":"light","primaryColor":"Access"}

After any nav menu is clicked, it again turns into:
theme: {"mode":null,"primaryColor":null}

But if the application is started again without any nav menu click, it remains:
theme: {"mode":"light","primaryColor":"Access"}

Looking at if this is linked to the interactive mode (client and server rendering in one application) in the new blazor template in .net 8

[dvoituron]

It can be possible.

1. How many <FluentDesignTheme /> do you have in your application? And where? To check whether a component should be updated with a null value, by updating local storage.
2. Have you added this RenderMode to use server mode only? <Routes @rendermode="InteractiveServer" />

[satyajit-behera]

Thanks @dvoituron I created a component for displaying theme options and used this to call from header button:

<FluentDesignTheme @bind-Mode="@Mode"
                   OfficeColor="@OfficeColor"
                   OfficeColorChanged="@(e => { OfficeColor = e ?? OfficeColor.Default; StateHasChanged(); })"
                   OnLuminanceChanged="@OnLuminanceChanged"
                   StorageName="theme" />

But there was one more that i left out in Layout page.
<FluentDesignTheme StorageName="theme" />

After removing the 2nd one used in the layout, it works. Thanks.