bvaughn/react-virtualized · critical · Error

Invalid metadata returned for cell ${index}: x:${cel

Error message

Invalid metadata returned for cell ${index}:
        x:${cellMetadatum.x}, y:${cellMetadatum.y}, width:${cellMetadatum.width}, height:${cellMetadatum.height}

What it means

calculateSizeAndPositionData throws when a cell's metadata (from the Collection's `cellSizeAndPositionGetter`) contains null/NaN for x, y, width, or height. Collection requires numeric geometry for every cell to build its section index and total bounds. This is a hard error because invalid geometry corrupts layout and hit-testing.

Source

Thrown at source/Collection/utils/calculateSizeAndPositionData.js:26

  const cellMetadata = [];
  const sectionManager = new SectionManager(sectionSize);
  let height = 0;
  let width = 0;

  for (let index = 0; index < cellCount; index++) {
    const cellMetadatum = cellSizeAndPositionGetter({index});

    if (
      cellMetadatum.height == null ||
      isNaN(cellMetadatum.height) ||
      cellMetadatum.width == null ||
      isNaN(cellMetadatum.width) ||
      cellMetadatum.x == null ||
      isNaN(cellMetadatum.x) ||
      cellMetadatum.y == null ||
      isNaN(cellMetadatum.y)
    ) {
      throw Error(
        `Invalid metadata returned for cell ${index}:
        x:${cellMetadatum.x}, y:${cellMetadatum.y}, width:${cellMetadatum.width}, height:${cellMetadatum.height}`,
      );
    }

    height = Math.max(height, cellMetadatum.y + cellMetadatum.height);
    width = Math.max(width, cellMetadatum.x + cellMetadatum.width);

    cellMetadata[index] = cellMetadatum;
    sectionManager.registerCell({
      cellMetadatum,
      index,
    });
  }

  return {
    cellMetadata,
    height,

View on GitHub (pinned to c737715486)

Solutions

1. Fix `cellSizeAndPositionGetter` to always return numeric x, y, width, height for every index.
2. Coerce/validate values: Number(...) and defaults for missing fields.
3. Ensure the data array length matches `cellCount` and records are loaded before rendering.
4. Log the offending index/data inside the getter to find the bad record.

Example fix

// before
cellSizeAndPositionGetter={({index}) => data[index]}

// after
cellSizeAndPositionGetter={({index}) => {
  const d = data[index];
  return {
    x: Number(d.x) || 0,
    y: Number(d.y) || 0,
    width: Number(d.width) || 0,
    height: Number(d.height) || 0,
  };
}}

function validateCellMeta(m, i) {
  const ok = [m.x, m.y, m.width, m.height].every(v => v != null && Number.isFinite(Number(v)));
  if (!ok) throw new Error(`cellSizeAndPositionGetter returned invalid metadata at index ${i}: ${JSON.stringify(m)}`);
  return m;
}

const isValidMeta = (m) => !!m && [m.x, m.y, m.width, m.height].every(v => v != null && Number.isFinite(Number(v)));

try { collection.render() } catch (e) { if (String(e.message).includes('Invalid metadata returned for cell')) { fixOrSkipBadRecord(e); } else { throw e; } }

When it happens

Trigger: `cellSizeAndPositionGetter` returns an object with undefined/NaN/null fields, typically because the underlying data record is missing fields, the getter indexes into a sparse array, or it returns strings instead of numbers.

Common situations: Data loaded asynchronously so the getter runs before records are populated; typo in property names (e.g. `left` instead of `x`); JSON data with missing coordinates; index out of bounds returning undefined values.

Related errors

• Fixed height CellMeasurerCache should specify a :defaultHeig
• Fixed width CellMeasurerCache should specify a :defaultWidth
• Rendered cell should include style property for positioning.
• 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/3ee0d758e8823259. Report an issue: GitHub.