Search code examples
ag-gridag-grid-react

AgGrid ^31.2.0 | Typescript Errors Enterprise vs Community

I'm working on setting up a new project that uses AgGrid's react library + enterprise library. I've installed the latest versions of ag-grid-react, ag-grid-community, and ag-grid-enterprise (^31.2.0). Unfortunately, despite them all being the same version (and I made sure to delete the yarn.lock file and re-install) I keep getting odd typescript conflicts.

For instance, if I have a file that exports a bunch of column definitions and attempt to use those with the AgGridReact component, the typescript flags the column definitions as being incompatible. But if I copy and past those same definitions directly into the component property, then it works.

Here's a ClientAgGrid component I'm attempting to create:

export interface ClientDataGridParams extends AgGridReactProps<Client> {
}

export const ClientDataGrid = (params?: ClientDataGridParams) => {
  const [trigger] = ClientsApi.useLazyReadClientsQuery(); // RTK Query

  return (
    <AgGridReact<Client>
      rowModelType="clientSide"

      columnDefs={ClientColumnDefs}

      {...params}
    />
  )
}

And here are the column definitions:

export const ClientColumnDefs: ColDef<Client>[] = [
  {
    headerName: "#",
    sortable: false,
    filter: false,
    floatingFilter: false,
    cellRenderer: RowNumberCellRenderer,
    width: 75,
    pinned: 'left'
  },
  {
    field: 'id',
    hide: true,
    filter: 'text'
  },
  {
    field: 'origin',
    filter: 'text',
  },
  {
    field: 'createdAt',
    headerName: 'Created At',
    filter: 'date',
    cellRenderer: DateTimeCellRenderer
  },
  {
    field: 'updatedAt',
    headerName: 'Updated At',
    filter: 'date',
    cellRenderer: DateTimeCellRenderer
  }
];

export default ClientColumnDefs;

I'm getting the following error when my project compiles....

TS2322: Type 'ColDef<Client, any>[]' is not assignable to type '(ColDef<Client, any> | ColGroupDef<Client>)[]'.
  Type 'ColDef<Client, any>' is not assignable to type 'ColDef<Client, any> | ColGroupDef<Client>'.
    Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/colDef").ColDef<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/colDef").ColDef<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>'.
      Types of property 'valueGetter' are incompatible.
        Type 'string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/colDef").ValueGetterFunc<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any> | undefined' is not assignable to type 'string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/colDef").ValueGetterFunc<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any> | undefined'.
          Type 'ValueGetterFunc<Client, any>' is not assignable to type 'string | ValueGetterFunc<Client, any> | undefined'.
            Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/colDef").ValueGetterFunc<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/colDef").ValueGetterFunc<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>'.
              Types of parameters 'params' and 'params' are incompatible.
                Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/colDef").ValueGetterParams<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/colDef").ValueGetterParams<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client, any>'.
                  Types of property 'node' are incompatible.
                    Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/interfaces/iRowNode").IRowNode<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client> | null' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/interfaces/iRowNode").IRowNode<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client> | null'.
                      Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/interfaces/iRowNode").IRowNode<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client>' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/interfaces/iRowNode").IRowNode<import("/home/rwilliams/repos/fifthsun/sentinel/src/api/mauthra/admin/Clients/common").Client>'.
                        Types of property 'setDataValue' are incompatible.
                          Type '(colKey: string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/column").Column<any>, newValue: any, eventSource?: string | undefined) => boolean' is not assignable to type '(colKey: string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/column").Column<any>, newValue: any, eventSource?: string | undefined) => boolean'.
                            Types of parameters 'colKey' and 'colKey' are incompatible.
                              Type 'string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/column").Column<any>' is not assignable to type 'string | import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/column").Column<any>'.
                                Type 'Column<any>' is not assignable to type 'string | Column<any>'.
                                  Type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-enterprise/dist/types/core/entities/column").Column<any>' is not assignable to type 'import("/home/rwilliams/repos/fifthsun/sentinel/node_modules/ag-grid-community/dist/types/core/entities/column").Column<any>'.
                                    Types have separate declarations of a private property 'gridOptionsService'.

EDIT:

I went and tried a few recent versions. v31.1.0 broke as well. However, v31.1.1 works!

Seems like they need to do some better quality control for their releases.

Solution

  • The AgGrid team is now tracking this thanks to this issue here: https://github.com/ag-grid/ag-grid/issues/7899

    The internal issue number is AG-11493. You can monitor it here: https://www.ag-grid.com/ag-grid-pipeline/

    They said that a fix should get out with the next release, or possibly the one after that if it was too close to the cutoff.