Cannot read properties of null (reading 'getBoundingClientRect')

Question

Hi, when I try to load in my dashboard page with the schedulerComponent (on the initial load in) with the timeline views my UI looks like this:

and it loads back to normal after refreshing or resizing the window, however, when I navigate to another page with my navigation bar (BrowserRouter used here) and then come back, it becomes:

and when I try to resize the window it becomes a runtime error where:

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

at Module.getElementWidth (http://localhost:3000/static/js/bundle.js:82103:90)

at YearEvent.timelineResourceEvents (http://localhost:3000/static/js/bundle.js:86810:62)

at YearEvent.renderAppointments (http://localhost:3000/static/js/bundle.js:86615:14)

at Year.onDataReady (http://localhost:3000/static/js/bundle.js:97360:26)

at Observer.notify (http://localhost:3000/static/js/bundle.js:15611:21)

at Component.notify (http://localhost:3000/static/js/bundle.js:8734:26)

at Crud.refreshProcessedData (http://localhost:3000/static/js/bundle.js:71596:17)

at Schedule.refreshEvents (http://localhost:3000/static/js/bundle.js:81121:25)

at Schedule.onScheduleResize (http://localhost:3000/static/js/bundle.js:79963:12)

For context, I am importing data through a single local .json file, and I am loading the data like this:

import test from './Scheduler/testing.json';

  useEffect(() => {
    setUnits(test['unitData'] || []);
    setProduct(test['productData'] || []);
    setProgramme(test['programmeData'] || []);
      }, 
  []);

What am I doing wrong? Thank you.

Ram Raju Elaiyaperumal · Accepted Answer

Devil LeeNo problem, We’re glad to hear you were able to
resolve the issue! Don't hesitate to reach out if you have any more questions
in the future.Regards,Ram

Ram Raju Elaiyaperumal · Answer

Hi Devil
Lee, Sample: https://stackblitz.com/edit/schedule-in-dashboard
We prepare the sample with your
shared code snippets but unable to reproduce the mentioned issue in our end.
kindly provide the following details, as they will greatly help us understand
and resolve the problem:
 Share all the
     code snippets related to the schedule component or
 Share the
     simple issue replicating sample or
 Replicate the
     issue in our shared sample,
 Share the
     issue replicate steps.

Regards,Ram

Devil Lee · Answer

Hi, sorry for the late reply, I figured out the error on my own! I was calling useEffect() at the wrong location thus causing the rendering to have issues. Thank you for your prompt response and help!