Bug: Radzen blazor js exception when document.body is null #1470

New Issue

claunia · 2026-01-29T17:54:04Z

claunia commented

2026-01-29 17:54:04 +00:00

Originally created by @jafin on GitHub (Nov 8, 2024).

d676c67b50/Radzen.Blazor/wwwroot/Radzen.Blazor.js (L20)

Using Radzen Blazor 5.5.1.0 inside a hybrid razor app.
On a page reload, this code will break on exception due to document.body being 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');
  })
}

could it be changed to guard for null body:

if (document.fonts && document.body) {
  document.body.classList.add('rz-icons-loading');
  document.fonts.load('16px Material Symbols').then(() => {
      document.body.classList.remove('rz-icons-loading');
  })
}

Originally created by @jafin on GitHub (Nov 8, 2024). https://github.com/radzenhq/radzen-blazor/blob/d676c67b50afe9be1cafaf4324ac6b7411185f1e/Radzen.Blazor/wwwroot/Radzen.Blazor.js#L20 Using Radzen Blazor 5.5.1.0 inside a hybrid razor app. On a page reload, this code will break on exception due to `document.body` being `null`. ```typescript if (document.fonts) { document.body.classList.add('rz-icons-loading'); document.fonts.load('16px Material Symbols').then(() => { document.body.classList.remove('rz-icons-loading'); }) } ``` could it be changed to guard for null body: ```typescript if (document.fonts && document.body) { document.body.classList.add('rz-icons-loading'); document.fonts.load('16px Material Symbols').then(() => { document.body.classList.remove('rz-icons-loading'); }) } ```

claunia closed this issue

2026-01-29 17:54:04 +00:00

claunia commented

2026-01-29 17:54:05 +00:00

@akorchev commented on GitHub (Nov 8, 2024):

Are you including the JavaScript file in the <head>? This isn't supported. If we added the check icon prefetching won't work and we have to guess why. By having this error people will know they should include the JS file in the <body> after the blazor javascript.

@akorchev commented on GitHub (Nov 8, 2024): Are you including the JavaScript file in the `<head>`? This isn't supported. If we added the check icon prefetching won't work and we have to guess why. By having this error people will know they should include the JS file in the `<body>` after the blazor javascript.

claunia commented

2026-01-29 17:54:05 +00:00

@jafin commented on GitHub (Nov 9, 2024):

@akorchev you are correct, I had the script in the head, moving to body resolved the error.

Any benefit in being verbose with an error? i.e.

if (document.fonts) {
  if (!document.body) {
    throw new Error('Script must be executed after document.body is available. Move script tag to end of body.');
  }
  document.body.classList.add('rz-icons-loading');
  document.fonts.load('16px Material Symbols').then(() => {
      document.body.classList.remove('rz-icons-loading');
  })
}

or just a case of me RTFM.

@jafin commented on GitHub (Nov 9, 2024): @akorchev you are correct, I had the script in the head, moving to body resolved the error. Any benefit in being verbose with an error? i.e. ```typescript if (document.fonts) { if (!document.body) { throw new Error('Script must be executed after document.body is available. Move script tag to end of body.'); } document.body.classList.add('rz-icons-loading'); document.fonts.load('16px Material Symbols').then(() => { document.body.classList.remove('rz-icons-loading'); }) } ``` or just a case of me RTFM.

claunia referenced this issue

2026-01-29 18:20:22 +00:00

[PR #1470] [MERGED] add custom split button content #2760

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1470