bvaughn/react-virtualized · error · Error

Invalid size returned for cell ${i} of value ${size}

Error message

Invalid size returned for cell ${i} of value ${size}

What it means

initCellMetadata() precomputes the size and cumulative offset of every cell (rows/columns) for react-virtualized's CellSizeAndPositionManager. Each size comes from your sizeGetter (e.g. cellSizeGetter / rowHeight / columnWidth). If the getter returns null, undefined, or NaN, no valid layout can be built, so the function throws while iterating cell index i.

Source

Thrown at source/utils/initCellMetadata.js:19

/**
 * Initializes metadata for an axis and its cells.
 * This data is used to determine which cells are visible given a container size and scroll position.
 *
 * @param cellCount Total number of cells.
 * @param size Either a fixed size or a function that returns the size for a given given an index.
 * @return Object mapping cell index to cell metadata (size, offset)
 */
export default function initCellMetadata({cellCount, size}) {
  const sizeGetter = typeof size === 'function' ? size : () => size;

  const cellMetadata = [];
  let offset = 0;

  for (var i = 0; i < cellCount; i++) {
    let size = sizeGetter({index: i});

    if (size == null || isNaN(size)) {
      throw Error(`Invalid size returned for cell ${i} of value ${size}`);
    }

    cellMetadata[i] = {
      size,
      offset,
    };

    offset += size;
  }

  return cellMetadata;
}

View on GitHub (pinned to c737715486)

Solutions

1. Fix the sizeGetter/rowHeight/columnWidth so it always returns a finite number for every index 0..cellCount-1, using a fallback: heights[index] || DEFAULT_HEIGHT.
2. If sizes depend on async data, don't render the grid (or set rowCount to 0) until the data is available, then recompute.
3. For variable heights computed in render, use the measured results with a default and memoize so the getter never returns undefined.
4. Log sizeGetter({index: i}) output for the failing index i (given in the message) to find which data entry is bad.

Example fix

// before
const rowHeight = ({index}) => rowHeights[index]; // undefined when data incomplete

// after
const DEFAULT_ROW_HEIGHT = 40;
const rowHeight = ({index}) => {
  const h = rowHeights[index];
  return Number.isFinite(h) ? h : DEFAULT_ROW_HEIGHT;
};

function validateSizeGetter(sizeGetter, cellCount) {
  for (let i = 0; i < cellCount; i++) {
    const size = sizeGetter({index: i});
    if (size == null || !Number.isFinite(Number(size))) {
      throw new Error(`sizeGetter returned invalid size ${size} at index ${i}`);
    }
  }
}
// call before rendering the Grid/List/Table

function isValidCellSize(size) {
  return size != null && Number.isFinite(Number(size));
}

try {
  const metadata = initCellMetadata({cellCount, sizeGetter});
} catch (e) {
  if (String(e.message).startsWith('Invalid size returned for cell')) {
    console.error('Fix sizeGetter: it returned a non-numeric value', e.message);
  } else {
    throw e;
  }
}

When it happens

Trigger: Passing a rowHeight/columnWidth (or custom sizeGetter) that returns NaN or null for some index — e.g. a function form like rowHeight={({index}) => heights[index]} where the data array is empty or the index is missing, or returning a non-numeric string via arithmetic that yields NaN.

Common situations: Dynamic row height computed from unloaded/async data (returns undefined before data loads), height function dividing by zero or by a missing measurement, passing a string height like 'auto' into arithmetic, or a getter written against the wrong react-virtualized API version (different callback signature).

Related errors

• Invalid offset ${offset} specified

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