Version 5.4.0 JS Error

Radzen.Blazor Components
1

I've upgraded from 5.3.1 to 5.4.0 and am getting a JS error in the Radzen.Blazor.js file line 20. Cannot read properties of null (reading 'classList').
I have made no other changes to app.razor, imports, etc; only updating the nuget package. Reverting to 5.3.1 resolves the issue.

2

Let us know where/how we can reproduce such error.

3

Create a .Net Apsire Blazor Server project and setup Radzen 5.3.1 using the getting started instructions. Confirm you can render components. Upgrade the nuget package to 5.4.0 then build/run. The error should be immediate in DevTools Console. My AppSettings has DetailErrors: true.

4

Our demos are using latest version and there is no such error:

5

Can you provide the full stackrace of the JS error? Or a screenshot from your browser.

6

Uncaught TypeError: Cannot read properties of null (reading 'classList')
at Radzen.Blazor.js?v=5.4.0.0:20:17

The issue seems to be in this new method. My classList is null.
if (document.fonts) {
document.body.classList.add('rz-icons-loading');
document.fonts.load('16px Material Symbols').then(() => {
document.body.classList.remove('rz-icons-loading');
})
}

7

Can you show us where you include Radzen.Blazor.js? Paste the complete code. The error means that document.body is null at the time the code executes and this could happen if you include Radzen.Blazor.js in the <head> of your page instead of at the end of <body>.

8

We have been placing this as the last script tag in the `head' element just before the 'RadzenTheme' element. This was working fine until the introduction of this new method.
'script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"/script'

Moving the script tag to the beginning of the body fixes this, but other developers may encounter this as well. Can we ignore the loading class and just implement the fonts.load?
if (document.fonts) document.fonts.load('16px Material Symbols');

9

Our getting started instructions specifically say where to put the JavaScript - after the last script. The default Blazor application template includes blazor.web.js in the body element:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="Blazor8Auto.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

This is where we recommend including it - after the last script file (<script src="_framework/blazor.web.js"></script>) not before, not in the head.

You have not been following the instructions and things were working mostly by chance.

10

Ah yes, the old script tags in head vs body discussion. We were using scripts in head since we were using InteractiveServer rendermode. Thank you for confirming the fix.