CellMeasurer registerChild expects to be passed Element or n

Error message

CellMeasurer registerChild expects to be passed Element or null

What it means

CellMeasurer's `_registerChild` warns when the registered child ref is neither a DOM Element nor null. CellMeasurer expects its child to render a real DOM node it can measure via `offsetWidth`/`offsetHeight`. A non-Element (e.g. a plain object, class instance, or component ref) means measurement cannot work, so the component emits a console warning instead of throwing.

Source

Thrown at source/CellMeasurer/CellMeasurer.js:169

    if (
      height !== cache.getHeight(rowIndex, columnIndex) ||
      width !== cache.getWidth(rowIndex, columnIndex)
    ) {
      cache.set(rowIndex, columnIndex, width, height);

      if (parent && typeof parent.recomputeGridSize === 'function') {
        parent.recomputeGridSize({
          columnIndex,
          rowIndex,
        });
      }
    }
  };

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

// Used for DEV mode warning check
if (process.env.NODE_ENV !== 'production') {
  CellMeasurer.__internalCellMeasurerFlag = true;
}

View on GitHub (pinned to c737715486)

Solutions

Render a plain DOM element (e.g. a <div>) as the direct child of CellMeasurer.
If using a custom component, wrap it in React.forwardRef and attach the ref to the outer DOM element.
Ensure `registerChild` prop, if used manually, is only called with an Element or null.
On React 19, do not return a value from ref callbacks (return null/undefined, not a cleanup function) when used as a ref here.

Example fix

// before
<CellMeasurer ...>
  <MyCustomCell row={row} />  // ref points to class instance
</CellMeasurer>

// after
const MyCustomCell = React.forwardRef((props, ref) => (
  <div ref={ref}>...</div>
));
<CellMeasurer ...>
  <MyCustomCell row={row} />
</CellMeasurer>

Defensive patterns

Strategy: type-guard

Validate before calling

function isDomEl(x) { return x === null || (typeof Element !== 'undefined' && x instanceof Element); }
// assert before render: console.assert(isDomEl(childRef.current))

Type guard

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

Prevention

Only put DOM elements or forwardRef components as CellMeasurer children
Never return a value from ref callbacks on React 19
Log ref values in dev to confirm they are Elements

When it happens

Trigger: Passing a class component (which yields a class-instance ref, not an Element) as CellMeasurer's child; wrapping the child so the forwarded ref points at a non-DOM object; calling `registerChild()` manually with a non-Element value; using React 19 ref callbacks that return a cleanup function (the returned value is treated as a ref).

Common situations: Upgrading React so refs behave differently; wrapping a `<div>` in a custom HOC that doesn't forward refs to the DOM node; using a custom component directly inside CellMeasurer instead of a DOM element or forwardRef wrapper.

Related errors

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