Cannot read properties of null (reading 'getBoundingClientRect') ​error - from 154185

[Lucas Wong]

---

LWLucas WongJune 18, 2024 06:41 PM UTC

Hi Synfusion Team,

I am using @syncfusion/ej2-react-schedule package v20.4.44 in my React project, and I am facing Cannot read properties of null (reading 'getBoundingClientRect') ​error. 
I am using Sentry for bug reporting, and it detected source from one of the files.

Can you please check it?

[Lucas Wong]

Hi Synfusion Team,

I am using @syncfusion/ej2-react-schedule package v20.4.44 in my React project, and I am facing Cannot read properties of null (reading 'getBoundingClientRect') ​error. 
I am using Sentry for bug reporting, and it detected source from one of the files.

Can you please check it?

[Lucas Wong]

Hi Synfusion Team,

I am using @syncfusion/ej2-react-schedule package v20.4.44 in my React project, and I am facing Cannot read properties of null (reading 'getBoundingClientRect') ​error. 
I am using Sentry for bug reporting, and it detected source from one of the files.

Can you please check it?

[Ram Raju Elaiyaperumal]

Hi Lucas Wong,

To help us investigate and resolve this issue more effectively, could you please provide us with the following additional information?

1. Scenario: Could you describe the specific scenario or action that triggers this error? For example, does it occur when you perform a certain action, or under specific conditions?

2. Video Demo: could you provide a short video demonstrating the issue? This would greatly help us understand the exact sequence of events leading to the error.

3. Code Snippet: Could you share the relevant sections of your code.

4. Sample: kindly  provide a minimal sample project that replicates the issue? This would allow us to debug the issue in an environment similar to yours.

5. Environment Details: Could you provide details about your development environment? Information such as the browser version, React version, and other relevant packages or libraries you're using would be helpful.

Your cooperation is greatly appreciated and will help us resolve this issue more quickly.

Regards

Ram.

[Lucas Wong]

1. It occurs some time after scheduler component is rendered without any other event.
2. https://drive.google.com/file/d/1QogCP7IeJmLpk4DK6k3gjHg_tOZEUfK1/view?usp=drive_link
   here is the online application you can check
   https://6679ac41cfecd7009529b9ab--friendly-griffin-317bcf.netlify.app/
   
3. https://github.com/LucasWongC/syncfusion-debug
   
4. https://github.com/LucasWongC/syncfusion-debug
5. browser: Google Chrome  126.0.6478.115
   you can find other package info in the code repository

[Vijay Ravi]

Hi Lucas Wong,

We have validated your shared project. In your project, you can use resource grouping, but the resource datasource is empty, which will cause the console error you mentioned. Can you share any particular reason why the resource datasource is empty? Also, can you provide the resource datasource in your project to resolve the issue, as shown in the code snippet below? Kindly try it out.

[app.tsx]

const getResourceName = (value: ResourceDetails): string => {

    return (((value as ResourceDetails).resourceData) ? (value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField] : value.resourceName) as string;

  }

 

  const resourceHeaderTemplate = (props: any) =>  {

    return (

      <div className="template-wrap">

        <div

          className="person-name meetingPersonBox"

          style={{

            background: getColor(props),

          }}

        >

          {/* <img src={getResourceImage(props)} height={30} width={30} /> */}

          <div className="resource-name">{getResourceName(props)}</div>

        </div>

      </div>

    );

  }

 

const calendarCollections: Record<string, any>[] = [

    { name: 'My Calendar', id: 1, color: '#c43081' },

    { name: 'Company', id: 2, color: '#ff7f50' },

    { name: 'Birthday', id: 3, color: '#AF27CD' },

    { name: 'Holiday', id: 4, color: '#808000' }

  ];

 

 

<ScheduleComponent group={{ resources: ["CalendarList"] }} >

   <ResourcesDirective>

        <ResourceDirective

         field="id"

         title="Provider"

         name="CalendarList"

         allowMultiple={true}

         dataSource={calendarCollections}

         textField="name"

         idField="id"

         groupIDField="GroupId"

         colorField="color"

         workDaysField="workDays"

         startHourField="startHour"

         endHourField="endHour"

         ></ResourceDirective>

   </ResourcesDirective>

</ScheduleComponent>

Output screenshot:

Please get back to us if you need any further assistance

Regards,

Vijay

[Lucas Wong]

You mean dataSource in ResourceDirective component?

It would be good if we could get connected on any chat to discuss in details, 

can you share your telegram or whatsapp?

[Vijay Ravi]

Hi Lucas Wong,

Can you please share the details requested in the previous update? So, we can check on our end and provide you with a solution. Please note that we do not use Telegram or Whatsapp at Syncfusion to discuss issues.

please get back to us if you need any further assistance

Regards,

Vijay

[Lucas Wong]

I asked if you were talking about dataSource in ResourceDirective component.

Actually I have data passed to it.

But it's an empty array initially, and later set the data when user clicks a certain button.

[Vijay Ravi]

Hi Lucas,

We consider your reported query with "Cannot read properties of null (reading 'getBoundingClientRect')" as a bug and logged the defect report. The fix for this defect will be included in our upcoming weekly patch release, which is expected to be rolled out by the July 16^th, 2024. You can track the status of the fix at the following link:

Feedback: https://www.syncfusion.com/feedback/59066/cannot-read-properties-of-null-reading-getboundingclientrect

please get back to us if you need any further assistance

Regards,

Vijay

[Swathi Ravi]

Hi Lucas,

 

The fix for the issue "Cannot read properties of null (reading 'getBoundingClientRect')", has been included in our weekly release 26.1.41. Upgrade to the latest version to resolve the issue.

 

Release notes: https://ej2.syncfusion.com/react/documentation/release-notes/26.1.41?type=all#schedule

 

Root Cause: When there are no resources present the Schedule won't have any work cells. In this case, the current time indicator rendering must have been prevented. But it's not prevented. So, it's throwing a script error because there is no work cell present.

 

Regards,

Swathi Ravi

[Lucas Wong]

Thanks for the update.

I updated the version to the latest, and now it says my license key is invalid which was working fine with previous version.

Do I have to register a new key?

[Swathi Ravi]

 

Lucas,

 

We understand that you are facing issues while registering the license in your application. Regarding this issue, please ensure that you are using the same major version for all Syncfusion components. Our Syncfusion licenses are version-specific, and if multiple major versions of our components are used in the same application, it can create version conflicts. Therefore, please make sure that you use the same version for all Syncfusion components.

 

Also, we have added solution for some issues arises repeatedly, refer to the below link,

 

Licensing errors in React Licensing component | Syncfusion

 

Licensing FAQ: Licensing troubleshoot in React Licensing component | Syncfusion

[Thomas]

I have the same problem with Angular version of schedule. I updated to 26.1.41 but still the same problem:

(actionFailure) is called with this actionEventArgs:

TypeError: Cannot read properties of null (reading 'getBoundingClientRect')

    at getElementWidth (http://localhost:4200/vendor.js:197501:56)

    at Schedule.getElementWidth (http://localhost:4200/vendor.js:215081:12)

    at YearEvent.timelineResourceEvents (http://localhost:4200/vendor.js:219269:34)

    at YearEvent.renderAppointments (http://localhost:4200/vendor.js:219074:14)

    at Year.onDataReady (http://localhost:4200/vendor.js:224007:26)

    at Observer.notify (http://localhost:4200/vendor.js:32423:21)

    at Component.notify (http://localhost:4200/vendor.js:37493:26)

    at Crud.refreshProcessedData (http://localhost:4200/vendor.js:212590:17)

    at ScheduleComponent.<anonymous> (http://localhost:4200/vendor.js:212533:13)

    at ComponentBase.trigger (http://localhost:4200/vendor.js:971:15)

This happens only when I select year view in schedule and without data to show. Month view is no problem (also with no data to show).

[Swathi Ravi]

Hi Thomas,

Thank you for bringing this issue to our attention.

Based on the details you provided, the error seems to be related to the Scheduler not rendering properly. To assist you further and ensure a more accurate resolution, we kindly request the following additional information:

1. Please share the entire code snippets related to the Scheduler.
2. Are you using the Horizontal or Vertical timeline year view?
3. Does the issue occur during the initial rendering of the Scheduler or when switching views?

This information will help us to better understand the scenario and provide you with a tailored solution.

We look forward to your response and are committed to resolving this issue promptly.

Best regards,
Swathi Ravi