bvaughn/react-virtualized · error · Error

Unexpected child type registered; only Grid/MultiGrid childr

Error message

Unexpected child type registered; only Grid/MultiGrid children are supported.

What it means

ColumnSizer requires its registered child to expose `recomputeGridSize` (i.e. be a Grid or MultiGrid), since it recalculates column width through that API. If the child ref lacks the method, it throws. ColumnSizer measures available width via its child, so an incompatible child is fatal.

Source

Thrown at source/ColumnSizer/ColumnSizer.js:87

    let columnWidth = width / columnCount;
    columnWidth = Math.max(safeColumnMinWidth, columnWidth);
    columnWidth = Math.min(safeColumnMaxWidth, columnWidth);
    columnWidth = Math.floor(columnWidth);

    let adjustedWidth = Math.min(width, columnWidth * columnCount);

    return children({
      adjustedWidth,
      columnWidth,
      getColumnWidth: () => columnWidth,
      registerChild: this._registerChild,
    });
  }

  _registerChild(child) {
    if (child && typeof child.recomputeGridSize !== 'function') {
      throw Error(
        'Unexpected child type registered; only Grid/MultiGrid children are supported.',
      );
    }

    this._registeredChild = child;

    if (this._registeredChild) {
      this._registeredChild.recomputeGridSize();
    }
  }
}

View on GitHub (pinned to c737715486)

Solutions

1. Make Grid (or MultiGrid) the direct child of ColumnSizer.
2. Remove any intermediate wrapper elements/components, or use forwardRef so the ref reaches the Grid instance.
3. Use ColumnSizer only with Grid/MultiGrid; for other components compute widths yourself.

Example fix

// before
<ColumnSizer ...>
  <div><Grid ref={...} ... /></div>
</ColumnSizer>

// after
<ColumnSizer ...>
  {({columnWidth, registerChild}) => (
    <Grid ref={registerChild} columnWidth={columnWidth} ... />
  )}
</ColumnSizer>

if (child && typeof child.recomputeGridSize !== 'function') {
  throw new Error('ColumnSizer child must be a Grid or MultiGrid');
}

const isGridLike = (c) => !!c && typeof c.recomputeGridSize === 'function';

try { renderWithColumnSizer() } catch (e) { if (String(e.message).includes('only Grid/MultiGrid children')) { renderFallbackWithoutColumnSizer(); } else { throw e; } }

When it happens

Trigger: Placing a component other than Grid/MultiGrid (e.g. List, a custom component, or a wrapper div) as ColumnSizer's child; wrapping Grid in a component that doesn't forward the ref to the Grid instance.

Common situations: Adding a container div between ColumnSizer and Grid; wrapping Grid in an HOC without ref forwarding; using ColumnSizer with List/Table (unsupported children).

Related errors

• CellMeasurer registerChild expects to be passed Element or n
• Rendered cell should include style property for positioning.
• WindowScroller registerChild expects to be passed Element or
• Requested index ${index} is outside of range 0..${this._cell
• Invalid size returned for cell ${i} of value ${size}

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