Uncaught TypeError: children is not a function

[Stanislaw Baranski]

Hello,
I'm facing with exception:
Unhandled Rejection (TypeError): children is not a function
which happens in
AutoSizer.render: node_modules/react-virtualized-auto-sizer/dist/index.esm.js:387

Here is stack strace:

Uncaught (in promise) TypeError: children is not a function
    at AutoSizer.render (umi.js:210668)
    at finishClassComponent (umi.js:197340)
    at updateClassComponent (umi.js:197293)
    at beginWork$1 (umi.js:199041)
    at HTMLUnknownElement.callCallback (umi.js:179295)
    at Object.invokeGuardedCallbackDev (umi.js:179344)
    at invokeGuardedCallback (umi.js:179399)
    at beginWork$$1 (umi.js:204663)
    at performUnitOfWork (umi.js:203571)
    at workLoopSync (umi.js:203547)
    at performSyncWorkOnRoot (umi.js:203115)
    at umi.js:191171
    at unstable_runWithPriority (umi.js:231847)
    at runWithPriority$2 (umi.js:191121)
    at flushSyncCallbackQueueImpl (umi.js:191166)
    at flushSyncCallbackQueue (umi.js:191154)
    at scheduleUpdateOnFiber (umi.js:202534)
    at scheduleRootUpdate (umi.js:205878)
    at updateContainerAtExpirationTime (umi.js:205906)
    at updateContainer (umi.js:206008)
    at legacyRenderSubtreeIntoContainer (umi.js:206612)
    at Object.render (umi.js:206689)
    at _callee$ (umi.js:273500)
    at tryCatch (umi.js:228678)
    at Generator.invoke [as _invoke] (umi.js:228904)
    at Generator.prototype.<computed> [as next] (umi.js:228730)
    at asyncGeneratorStep (umi.js:95087)
    at _next (umi.js:95109)
    at umi.js:95116
    at new Promise (<anonymous>)
    at umi.js:95105
    at clientRender (umi.js:273511)
    at umi.js:273608
    at hotApply (umi.js:635)
    at umi.js:314

Here is my code that generates this exception:

import React from 'react';
import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
import { connect } from 'dva';
import { CellMeasurerCache } from 'react-virtualized';
import { FixedSizeGrid, GridChildComponentProps } from 'react-window';
import { ConnectState } from '@/models/connect';
import BatteryView from '@/components/BatteryView';
import { Battery } from '@/types/battery';
import BatteryPreviewDrawer from '@/components/BatteryPreviewDrawer';

interface BatteriesComponentProps {
  batteries: Battery[];
}

interface BatteriesComponentState {
  columnWidth: number;
  rowHeight: number;
  gutterSize: number;
  columnCount: number;
}

class Batteries extends React.PureComponent<BatteriesComponentProps, BatteriesComponentState> {
  gridWidth: number = 0;

  cache: CellMeasurerCache = new CellMeasurerCache({
    defaultHeight: 300,
    defaultWidth: 300,
    fixedWidth: true,
  });

  state: BatteriesComponentState = {
    columnWidth: 300,
    rowHeight: 300,
    gutterSize: 10,
    columnCount: 0,
  };

  private onResize = ({ width }: Size) => {
    this.gridWidth = width;
    this.calculateColumnCount();
  };

  private calculateColumnCount = () => {
    const { columnWidth, gutterSize } = this.state;
    const columnCount = Math.floor(this.gridWidth / (columnWidth + gutterSize));
    console.log(`columnCount: ${columnCount}`);
    this.setState({ columnCount });
  };

  private renderGrid = ({ width, height }: Size) => {
    this.gridWidth = width;
    const { columnWidth, rowHeight, columnCount } = this.state;

    console.log(`render grid of dimensions ${width}x${height}`);
    const { batteries } = this.props;
    const rowCount = Math.ceil(batteries.length / columnCount);
    const getBattery = (columnIndex: number, rowIndex: number) =>
      batteries[(rowIndex * columnCount + columnIndex) % batteries.length];
    return (
      <div>
        <FixedSizeGrid
          columnCount={columnCount}
          columnWidth={columnWidth}
          width={width}
          height={height}
          rowCount={rowCount}
          rowHeight={rowHeight}
        >
          {({ columnIndex, rowIndex, style }: GridChildComponentProps) => (
            <div style={{ ...style }}>
              <BatteryView
                height={rowHeight}
                width={columnWidth}
                battery={getBattery(columnIndex, rowIndex)}
              />
            </div>
          )}
        </FixedSizeGrid>
        <BatteryPreviewDrawer />
      </div>
    );
  };

  public render() {
    return <AutoSizer onResize={this.onResize}>{this.renderGrid}</AutoSizer>;
  }
}

export default connect(({ batteries: { batteries } }: ConnectState) => ({ batteries }))(Batteries);

And the worst thing about it is that it was working before, and it seems that I didn't change anything in this file (that's what git says)

[Brian Vaughn]

Closing this issue as likely no longer applicable.