[BUG] TypeError A(react-virtuoso/dist/index.m) e.getBoundingClientRect is not a function

[alexgleason]

Describe the bug Hi there! I'm getting quite a lot of Sentry errors about this line here:

Reproduction

My first thought: it must be old browsers, but it's not. Here are some clients where this is failing:

Meanwhile, should be supported: https://caniuse.com/?search=getBoundingClientRect

To Reproduce

I can't reproduce it locally. Here are arguments from Sentry:

Expected behavior

No error is thrown.

[petyosi]

@alexgleason what you're seeing there is the default value of the itemSize property. My guess is that, somehow, this gets called on something that does not have the method - maybe window?

Can you try something like this:

export function customCorrectItemSize(el: HTMLElement, dimension: 'height' | 'width') {
  try {
    return Math.round(el.getBoundingClientRect()[dimension])
  } catch (e) {
   // you might want to throw a more meaningful error, like, getting the element id, or something.
    throw new Error(`${el} does not have getBoundingClientRect`)
  }
}

and then pass it:

<Virtuoso itemSize={customCorrectItemSize} />

[petyosi]

@alexgleason did you find out something here? Curious to solve this.

[alexgleason]

Working on it: https://gitlab.com/soapbox-pub/soapbox-fe/-/merge_requests/1578

Haven't gotten past the local dev stage yet. The Virtuoso component disappears with these errors in the console:

Warning: NaN is an invalid value for the height css style property.

Warning: Received NaN for the data-known-size attribute. If this is expected, cast the value to a string.

[github-actions[bot]]

:tada: This issue has been resolved in version 2.16.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[petyosi]

@alexgleason I think I found the problem (another report pinpointed it).

[alexgleason]

Thank you!