bvaughn/react-virtualized · warning

WindowScroller registerChild expects to be passed Element or

Error message

WindowScroller registerChild expects to be passed Element or null

What it means

WindowScroller's `_registerChild` warns when the registered child ref is not a DOM Element or null. WindowScroller needs the child element to compute offsets and attach scroll/resize handlers relative to the window. Like CellMeasurer's version, this indicates the child ref points at something other than a DOM node.

Source

Thrown at source/WindowScroller/WindowScroller.js:198

      'div',
      {
        ref: this._windowScrollerRef,
      },
      children({
        onChildScroll: this._onChildScroll,
        registerChild: this._registerChild,
        height,
        isScrolling,
        scrollLeft,
        scrollTop,
        width,
      }),
    );
  }

  _registerChild = element => {
    if (element && !(element instanceof Element)) {
      console.warn(
        'WindowScroller registerChild expects to be passed Element or null',
      );
    }
    this._child = element;
    this.updatePosition();
  };

  _onChildScroll = ({scrollTop}) => {
    if (this.state.scrollTop === scrollTop) {
      return;
    }

    const scrollElement = this.props.scrollElement;
    if (scrollElement) {
      if (typeof scrollElement.scrollTo === 'function') {
        scrollElement.scrollTo(0, scrollTop + this._positionFromTop);
      } else {
        scrollElement.scrollTop = scrollTop + this._positionFromTop;

View on GitHub (pinned to c737715486)

Solutions

1. Render a DOM element (or a forwardRef component resolving to one) as WindowScroller's direct child.
2. Wrap custom components in React.forwardRef attaching the ref to the outer DOM node.
3. Ensure Grid/List inside WindowScroller receives `autoHeight` so it sizes correctly in the window-scroll context.
4. Only call `registerChild` with an Element or null.

Example fix

// before
<WindowScroller>{({height}) => <MyList height={height} />}</WindowScroller>

// after (MyList forwards ref to its DOM/container element, Grid via forwardRef)
<WindowScroller>
  {({height, registerChild}) => (
    <MyList ref={registerChild} autoHeight height={height} />
  )}
</WindowScroller>

const ok = (el) => el === null || (typeof Element !== 'undefined' && el instanceof Element);
if (process.env.NODE_ENV !== 'production' && !ok(childRef.current)) console.warn('WindowScroller child ref is not an Element');

const isElementOrNull = (x) => x === null || (typeof Element !== 'undefined' && x instanceof Element);

When it happens

Trigger: Passing a class component or non-forwarding component as WindowScroller's child; `registerChild` called manually with a non-Element; ref callback returning a value (React 19 cleanup semantics).

Common situations: Wrapping Grid/List in a custom component inside WindowScroller without forwardRef; higher-order components that don't pass refs through; React version upgrades changing ref behavior.

Related errors

• CellMeasurer registerChild expects to be passed Element or n
• Unexpected child type registered; only Grid/MultiGrid childr

AI-assisted analysis of bvaughn/react-virtualized@c737715486 (2026-08-30). Data as JSON: /api/errors/f909594acf67a74c. Report an issue: GitHub.