{"record":{"id":"26fd7ab7c46a5093","repo":"bvaughn/react-virtualized","slug":"unexpected-child-type-registered-only-grid-multig","errorCode":null,"errorMessage":"Unexpected child type registered; only Grid/MultiGrid children are supported.","messagePattern":"Unexpected child type registered; only Grid/MultiGrid children are supported\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"source/ColumnSizer/ColumnSizer.js","lineNumber":87,"sourceCode":"\n    let columnWidth = width / columnCount;\n    columnWidth = Math.max(safeColumnMinWidth, columnWidth);\n    columnWidth = Math.min(safeColumnMaxWidth, columnWidth);\n    columnWidth = Math.floor(columnWidth);\n\n    let adjustedWidth = Math.min(width, columnWidth * columnCount);\n\n    return children({\n      adjustedWidth,\n      columnWidth,\n      getColumnWidth: () => columnWidth,\n      registerChild: this._registerChild,\n    });\n  }\n\n  _registerChild(child) {\n    if (child && typeof child.recomputeGridSize !== 'function') {\n      throw Error(\n        'Unexpected child type registered; only Grid/MultiGrid children are supported.',\n      );\n    }\n\n    this._registeredChild = child;\n\n    if (this._registeredChild) {\n      this._registeredChild.recomputeGridSize();\n    }\n  }\n}\n","sourceCodeStart":69,"sourceCodeEnd":99,"githubUrl":"https://github.com/bvaughn/react-virtualized/blob/c737715486f724586aee8870ebea1e9efb7b0bfe/source/ColumnSizer/ColumnSizer.js#L69-L99","documentation":"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.","triggerScenarios":"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.","commonSituations":"Adding a container div between ColumnSizer and Grid; wrapping Grid in an HOC without ref forwarding; using ColumnSizer with List/Table (unsupported children).","solutions":["Make Grid (or MultiGrid) the direct child of ColumnSizer.","Remove any intermediate wrapper elements/components, or use forwardRef so the ref reaches the Grid instance.","Use ColumnSizer only with Grid/MultiGrid; for other components compute widths yourself."],"exampleFix":"// before\n<ColumnSizer ...>\n  <div><Grid ref={...} ... /></div>\n</ColumnSizer>\n\n// after\n<ColumnSizer ...>\n  {({columnWidth, registerChild}) => (\n    <Grid ref={registerChild} columnWidth={columnWidth} ... />\n  )}\n</ColumnSizer>","handlingStrategy":"type-guard","validationCode":"if (child && typeof child.recomputeGridSize !== 'function') {\n  throw new Error('ColumnSizer child must be a Grid or MultiGrid');\n}","typeGuard":"const isGridLike = (c) => !!c && typeof c.recomputeGridSize === 'function';","tryCatchPattern":"try { renderWithColumnSizer() } catch (e) { if (String(e.message).includes('only Grid/MultiGrid children')) { renderFallbackWithoutColumnSizer(); } else { throw e; } }","preventionTips":["Keep Grid/MultiGrid as the direct child of ColumnSizer","Avoid wrapper divs/components between them, or forward refs","Render-prop API of ColumnSizer makes wiring explicit — use it"],"tags":["columnsizer","grid","child-type","ref"],"backgroundTag":"incompatible-virtualized-child","analyzedSha":"c737715486f724586aee8870ebea1e9efb7b0bfe","analyzedAt":"2026-08-30T00:33:38.249Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}