starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

JSException: Cannot read properties of null (reading 'querySelector') at Object.createDatePicker #1239

New Issue
Closed
opened 2026-01-29 17:50:54 +00:00 by claunia · 0 comments
claunia commented 2026-01-29 17:50:54 +00:00
Owner
Copy Link

Originally created by @esmeweaterwax on GitHub (May 21, 2024).

Describe the bug
When entering a page in Web application, unexpected exception is thrown during page's load/rendering. Issue occurs in Radzen version 4.31.7, but was observed also in few older versions, e.g. 4.29.8. Stack trace is as follow:

2024-05-21 12:22:33:955 +02:00|WRN|022||| Unhandled exception rendering component: Cannot read properties of null (reading 'querySelector')
TypeError: Cannot read properties of null (reading 'querySelector')
    at Object.createDatePicker (https://localhost:7046/_content/Radzen.Blazor/Radzen.Blazor.js?v=4.31.7.0:995:23)
    at https://localhost:7046/_framework/blazor.web.js:1:3244
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:7046/_framework/blazor.web.js:1:3201)
    at gn._invokeClientMethod (https://localhost:7046/_framework/blazor.web.js:1:62841)
    at gn._processIncomingData (https://localhost:7046/_framework/blazor.web.js:1:60316)
    at connection.onreceive (https://localhost:7046/_framework/blazor.web.js:1:53957)
    at i.onmessage (https://localhost:7046/_framework/blazor.web.js:1:82102)
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'querySelector')
TypeError: Cannot read properties of null (reading 'querySelector')
    at Object.createDatePicker (https://localhost:7046/_content/Radzen.Blazor/Radzen.Blazor.js?v=4.31.7.0:995:23)
    at https://localhost:7046/_framework/blazor.web.js:1:3244
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:7046/_framework/blazor.web.js:1:3201)
    at gn._invokeClientMethod (https://localhost:7046/_framework/blazor.web.js:1:62841)
    at gn._processIncomingData (https://localhost:7046/_framework/blazor.web.js:1:60316)
    at connection.onreceive (https://localhost:7046/_framework/blazor.web.js:1:53957)
    at i.onmessage (https://localhost:7046/_framework/blazor.web.js:1:82102)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Radzen.Blazor.RadzenDatePicker`1.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
2024-05-21 12:22:34:020 +02:00|ERR|022||| Unhandled exception in circuit 'kyF98Y1xPfjuC2SIiaRf82QuWzxTW7xxtW4U41OhMuA'.
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'querySelector')
TypeError: Cannot read properties of null (reading 'querySelector')
    at Object.createDatePicker (https://localhost:7046/_content/Radzen.Blazor/Radzen.Blazor.js?v=4.31.7.0:995:23)
    at https://localhost:7046/_framework/blazor.web.js:1:3244
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:7046/_framework/blazor.web.js:1:3201)
    at gn._invokeClientMethod (https://localhost:7046/_framework/blazor.web.js:1:62841)
    at gn._processIncomingData (https://localhost:7046/_framework/blazor.web.js:1:60316)
    at connection.onreceive (https://localhost:7046/_framework/blazor.web.js:1:53957)
    at i.onmessage (https://localhost:7046/_framework/blazor.web.js:1:82102)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Radzen.Blazor.RadzenDatePicker`1.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

To Reproduce
Error occurs not always but very often in application deployed to Azure, so we decided to not upgrade Radzen in our code above 4.27.1, to keep application stable. Exception occurs on the page containing RadzenDataGrid and small custom component containing one RadzenRow with 5 columns (2 labels, 2 RadzenDropDowns, 2 RadzenButtons in last column). So there is some loading data for grid (on page) and for drop-down lists (in custom component). But I was able to reproduce it locally just like this:

  1. Create new Razor page
@page "/testload"

<h3>Test Load Page</h3>

@code {

}
  1. Add following line in NavMenu.razor, in RadzenPanelMenu from RadzenSidebar:
    <RadzenPanelMenuItem Text="Test load" Icon="bug_report" Path="/testload" />
  2. Run application locally
  3. Click in menu on icon to open your new page
  4. Exception is thrown.

Expected behavior
Pages in application are loaded without exception mentioned above.

Desktop (please complete the following information):

  • Browser: Chrome 125.0.6422.60

Additional context

  • There is no dates edition in our application. Our application does not use datepickers.
  • Web application in .NET 8
Originally created by @esmeweaterwax on GitHub (May 21, 2024). **Describe the bug** When entering a page in Web application, unexpected exception is thrown during page's load/rendering. Issue occurs in Radzen version 4.31.7, but was observed also in few older versions, e.g. 4.29.8. Stack trace is as follow: ``` 2024-05-21 12:22:33:955 +02:00|WRN|022||| Unhandled exception rendering component: Cannot read properties of null (reading 'querySelector') TypeError: Cannot read properties of null (reading 'querySelector') at Object.createDatePicker (https://localhost:7046/_content/Radzen.Blazor/Radzen.Blazor.js?v=4.31.7.0:995:23) at https://localhost:7046/_framework/blazor.web.js:1:3244 at new Promise (<anonymous>) at y.beginInvokeJSFromDotNet (https://localhost:7046/_framework/blazor.web.js:1:3201) at gn._invokeClientMethod (https://localhost:7046/_framework/blazor.web.js:1:62841) at gn._processIncomingData (https://localhost:7046/_framework/blazor.web.js:1:60316) at connection.onreceive (https://localhost:7046/_framework/blazor.web.js:1:53957) at i.onmessage (https://localhost:7046/_framework/blazor.web.js:1:82102) Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'querySelector') TypeError: Cannot read properties of null (reading 'querySelector') at Object.createDatePicker (https://localhost:7046/_content/Radzen.Blazor/Radzen.Blazor.js?v=4.31.7.0:995:23) at https://localhost:7046/_framework/blazor.web.js:1:3244 at new Promise (<anonymous>) at y.beginInvokeJSFromDotNet (https://localhost:7046/_framework/blazor.web.js:1:3201) at gn._invokeClientMethod (https://localhost:7046/_framework/blazor.web.js:1:62841) at gn._processIncomingData (https://localhost:7046/_framework/blazor.web.js:1:60316) at connection.onreceive (https://localhost:7046/_framework/blazor.web.js:1:53957) at i.onmessage (https://localhost:7046/_framework/blazor.web.js:1:82102) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at Radzen.Blazor.RadzenDatePicker`1.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState) 2024-05-21 12:22:34:020 +02:00|ERR|022||| Unhandled exception in circuit 'kyF98Y1xPfjuC2SIiaRf82QuWzxTW7xxtW4U41OhMuA'. Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'querySelector') TypeError: Cannot read properties of null (reading 'querySelector') at Object.createDatePicker (https://localhost:7046/_content/Radzen.Blazor/Radzen.Blazor.js?v=4.31.7.0:995:23) at https://localhost:7046/_framework/blazor.web.js:1:3244 at new Promise (<anonymous>) at y.beginInvokeJSFromDotNet (https://localhost:7046/_framework/blazor.web.js:1:3201) at gn._invokeClientMethod (https://localhost:7046/_framework/blazor.web.js:1:62841) at gn._processIncomingData (https://localhost:7046/_framework/blazor.web.js:1:60316) at connection.onreceive (https://localhost:7046/_framework/blazor.web.js:1:53957) at i.onmessage (https://localhost:7046/_framework/blazor.web.js:1:82102) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at Radzen.Blazor.RadzenDatePicker`1.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState) ``` **To Reproduce** Error occurs not always but very often in application deployed to Azure, so we decided to not upgrade Radzen in our code above 4.27.1, to keep application stable. Exception occurs on the page containing RadzenDataGrid and small custom component containing one RadzenRow with 5 columns (2 labels, 2 RadzenDropDowns, 2 RadzenButtons in last column). So there is some loading data for grid (on page) and for drop-down lists (in custom component). But I was able to reproduce it locally just like this: 1. Create new Razor page ``` @page "/testload" <h3>Test Load Page</h3> @code { } ``` 2. Add following line in NavMenu.razor, in RadzenPanelMenu from RadzenSidebar: ` <RadzenPanelMenuItem Text="Test load" Icon="bug_report" Path="/testload" />` 4. Run application locally 5. Click in menu on icon to open your new page 6. Exception is thrown. **Expected behavior** Pages in application are loaded without exception mentioned above. **Desktop (please complete the following information):** - Browser: Chrome 125.0.6422.60 **Additional context** - There is no dates edition in our application. Our application does not use datepickers. - Web application in .NET 8
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1239
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?