Blueprint: Error Type: Type 'Element[]' is not assignable to type 'ReactElement<IColumnProps> | ReactElement<IColumnProps>[] | (string & ReactElement<IColumnProps>)

[tomzaku]

Environment

• "typescript": "^3.1.6"
• "@blueprintjs/core": "^3.9.0",
• "@blueprintjs/datetime": "^3.4.0",
• "@blueprintjs/docs-theme": "^3.0.3",
• "@blueprintjs/select": "^3.3.0",
• "@blueprintjs/table": "^3.3.0",

Actual behavior

import React from 'react'
import {
    Column,
    Table,
    TableLoadingOption
    } from '@blueprintjs/table'

const COLUMNS = [
    'Name',
    'Age',
]

const Drilldown = () => (
    <div>
        <h1>Drilldown</h1>
        <Table numRows={5} loadingOptions={[TableLoadingOption.CELLS]}>
            {COLUMNS.map((title, index) => (
                <Column
                    name={title}
                    key={index}
                    // cellRenderer={(rowIndex, columIndex) => (<Cell>'1'</Cell>)}
                    // columnHeaderCellRenderer={() => <ColumnHeaderCell name={title}/>}
                />
            ))}
        </Table>
    </div>
)

export default Drilldown

Throw error at Table definition:

Types of property 'children' are incompatible.
    Type 'Element[]' is not assignable to type 'ReactElement<IColumnProps> | ReactElement<IColumnProps>[] | (string & ReactElement<IColumnProps>) | (string & ReactElement<IColumnProps>[]) | (number & ReactElement<IColumnProps>) | ... 11 more ... | undefined'.
      Type 'Element[]' is not assignable to type 'ReactElement<IColumnProps>[]'.
        Type 'Element' is not assignable to type 'ReactElement<IColumnProps>'.
          Types of property 'type' are incompatible.
            Type 'string | ComponentClass<any, ComponentState> | StatelessComponent<any>' is not assignable to type 'string | ComponentClass<IColumnProps, any> | FunctionComponent<IColumnProps>'.
              Type 'ComponentClass<any, ComponentState>' is not assignable to type 'string | ComponentClass<IColumnProps, any> | FunctionComponent<IColumnProps>'.
                Type 'ComponentClass<any, ComponentState>' is not assignable to type 'ComponentClass<IColumnProps, any>'.
                  Types of property 'propTypes' are incompatible.
                    Type 'ValidationMap<any> | undefined' is not assignable to type 'ValidationMap<IColumnProps> | undefined'.
                      Type 'ValidationMap<any>' is not assignable to type 'ValidationMap<IColumnProps>'.
                        Property 'id' is missing in type 'ValidationMap<any>'. [2322]

How can I resolve that?

[adidahiya]

this is essentially the same issue as https://github.com/palantir/blueprint/issues/1108... I would suggest generating your columns in a separate function/method and using a type cast for now.

[JohannesHome]

For me I was able to fix the issue through adding a {} block.

const Drilldown = () => (
  <div>
    <h1>Drilldown</h1>
    <Table numRows={5} >
      {['First', 'Last'].map((title, index) => (
        <Column
          name={title}
          key={index}
          // cellRenderer={(rowIndex, columIndex) => (<Cell>'1'</Cell>)}
          // columnHeaderCellRenderer={() => <ColumnHeaderCell name={title}/>}
        />
      ))}
      {/*Hack: This block tricks the compiler to accept more jsx types then just jsx.Element. */}
    </Table>
  </div>
);

The upgrade to typescript 3.5.2 from 3.0.3 brought this error in my case. Without investigating further, I would guess that the typings in React don't fit to the JSX typings anymore (compiler is now much stricter)?