React-virtualized: WindowScroller height undefined

[tysonnero]

I'm using the following code sampled from: https://github.com/bvaughn/react-virtualized/blob/master/source/WindowScroller/WindowScroller.example.js.

When loading the page, I am seeing the this prop type warning:
Warning: Failed prop type: The prop `height` is marked as required in `List`, but its value is `undefined`.

However, when I inspect the List element using the React dev tools, the height prop is set appropriately.

I followed the example as closely as possible, and I do not see any differences in the code. Could this be a bug with WindowScroller, or is it more likely an implementation issue?

<WindowScroller scrollElement={this.mainContent}>
  {({ height, isScrolling, onChildScroll, registerChild, scrollTop }) => (
    <AutoSizer disableHeight={true}>
      {({ width }) => (
        <div ref={registerChild}>
          <List
            autoHeight={true}
            height={height}
            isScrolling={isScrolling}
            onScroll={onChildScroll}
            ref={this.virtualListRef}
            rowCount={this.state.list.length}
            rowHeight={50}
            rowRenderer={this.rowRenderer}
            scrollTop={scrollTop}
            width={width} />
        </div>
      )}
    </AutoSizer>
  )}
</WindowScroller>

[wuweiweiwu]

Can you post a reproduction in codesandbox? I think its most likely the way your implementation differs from the example

[tysonnero]

@wuweiweiwu Thanks for the reply. You're right, it was in fact an implementation issue.

[wuweiweiwu]

no problem!

[dylanwulf]

I am also experiencing this and I believe it is an actual bug. When I provide a scrollElement to WindowScroller, height is undefined for the very first render. I believe the problem is in WindowScroller.js on line 93. This line is trying to set state using the spread operator with getDimensions. But getDimensions is returning a DOMRect, which cannot be used with the spread operator. According to MDN:

Properties in the returned DOMRect object are not own properties. While the in operator and for...in will find returned properties, other APIs such as Object.keys() will fail. Moreover, and unexpectedly, the ES2015 and newer features such as Object.assign() and object rest/spread will fail to copy returned properties.

(https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

[mareolan]

I've hit the issue with scrollElement too (height being undefined for the very first render because this.state = { ...getDimensions(scrollElement) } doesn't fill any property). In my case the List then effectively renders all rows resulting in out of memory error. ScrollElement was DOM node, not window.

Edit: this is actually same as #1158 which is Open.