Cannot read properties of null (reading 'firstElementChild')

I'm getting this error on certain spreadsheets:

syncfusion-vendor-4824cf92.js:227 Uncaught TypeError: Cannot read properties of null (reading 'firstElementChild')
    at l.updateVTrack (syncfusion-vendor-4824cf92.js:227:69768)
    at l.updateRowColCount (syncfusion-vendor-4824cf92.js:227:67366)
    at l.notify (syncfusion-vendor-4824cf92.js:2:32471)
    at e.notify (syncfusion-vendor-4824cf92.js:146:4598)
    at e.setUsedRange (syncfusion-vendor-4824cf92.js:218:125440)
    at l.format (syncfusion-vendor-4824cf92.js:218:39308)
    at l.notify (syncfusion-vendor-4824cf92.js:2:32471)
    at e.notify (syncfusion-vendor-4824cf92.js:146:4598)
    at e.cellFormat (syncfusion-vendor-4824cf92.js:218:120887)
    at index-8383bf30.js:113:22266


The error seems to be in the last line of this function:

l.prototype.updateVTrack = function(e, t, i) {
        e.nextElementSibling.style["" + i] = t + "px",
        this.content.nextElementSibling.style["" + i] = t + "px",
        i === "width" && this.parent.allowScrolling && (this.parent.getScrollElement().firstElementChild.style.width = t + "px")
    }



1 Reply

JS Janakiraman Sakthivel Syncfusion Team January 29, 2025 11:28 AM UTC

Hi Tim Law,

We have reviewed the details and code snippets you provided and would like to inform you that the reason for the problem is that the scroll bar element is missing in your reported scenario. As a result, when trying to get the firstElementChild element from the scroll bar element, the reported issue occurs on your end.

This reported issue may occur while the cell format is being applied in the spreadsheet, particularly if any DOM refresh actions are triggered during the process. We would also like to inform you that during cell formatting, the updateVTrack function is invoked. And If a DOM refresh occurs asynchronously at this time, the scroll bar element may not be available when updateVTrack executes. Consequently, attempting to access the firstElementChild of the scroll bar in this scenario may result in the reported issue.


To proceed further, we kindly request you to share the following details:

  1. Please describe the exact scenario when the reported issue occurred on your end.
  2. Share the client-side code snippets along with the component rendering code.
  3. If you have made any customizations, please share the relevant code snippets as well.
  4. Please provide a video demonstration of the issue to help us understand it better.

Kindly provide all the requested information above. Based on these details, we will replicate and validate the reported problem on our end and promptly provide a detailed solution.


Loader.
Up arrow icon