Cannot read property 'width' of null

[m-nathani]

I am using vis-timeline "vis-timeline": "^7.5.1" on chrome browser in Android OS,

Getting error on mobile (android) devices for width of on repositionX at vis-timeline/lib/timeline/component/item/RangeItem.js in repositionX at line 255:37

Here is the link to sentry issue i am getting: https://sentry.io/share/issue/79fcb72ab73e46c693f6049d73e9a1a8/

NOTE: facing the issue on desktop browser now.. mostly happens only on mobile (android).

Looks like its trying to redraw all components using below

       // redraw all components
       this.components.forEach(component => {
           resized = component.redraw() || resized;
       }); 

which recalulates position causing an error:

repositionX(limitSize) {
   const parentWidth = this.parent.width;  // <-------------- error here width of null

Does anyone else is facing the same issue or know the cause of it ?

[darishodzic]

same thing

[thanhnhan2tn]

I got the same issue. Did your guys has any workaround?

[m-nathani]

I had this issue, and for me it was related to how I was syncing data using vis-data..

Use case:

The timeline on my app is loading data with multiple sources at the same time ( multiple apis ).

Problem:

The error occurs on timeline, when dataset is cleared. However, some data at the same time was rendered on timeline, which conflicts.

Due to which we get an error that width property cannot be read, because data is cleared when it was rendering some items on timeline.

Solution:

Only clear dataset items when all http apis are loading.

So according to my usecase, I had to change condition which should clear all data only when its loading every api,

if (
      timeline &&
      isReservationLoading &&
      isWaitlistLoading &&
      isRoomTablesLoading &&
      isAvailabilitiesLoading
    ) {
      // Clear the complete DataSet for items if api's are loading for all the dataset items.
      itemDataSet.clear();
    }