AgGridReact Error No overload matches this call onGridReady

Question

can somebody please help me with this error?

I am working on a data table with ag grid (https://www.ag-grid.com) in a react functional component.

As I want to add a callback property (onGridReady()) I receive this error:

Short error text

Property 'onGridReady' does not exist on type 'IntrinsicAttributes & (IntrinsicClassAttributes & (Readonly<AgGridReactProps | AgReactUiProps> & Readonly<...>))'.

...
import { AgGridReact } from "ag-grid-react";

...

const onGridReady = (params: any) => {
  console.log("grid ready");
 };

...
          <AgGridReact
            ref={agGrid}
            onGridReady={onGridReady}
            columnDefs={colDef}
...

In package.json

...

  "dependencies": {
    "@ag-grid-enterprise/all-modules": "27.1.0",
    "@ag-grid-community/all-modules": "27.1.0",
    "ag-grid-react": "27.1.0",
...

I dont understand whats wrong with my onGridReady method. It was fine during the day. Then I updated some dependencies (as shown in package.json snipped). And even more irritating, if I remove that line, next line is marked with that error. But its the same import as in examples and docs.

What am I missing?

Kind regards, Knut

Long version of error text

No overload matches this call. Overload 1 of 2, '(props: AgGridReactProps | AgReactUiProps | Readonly<AgGridReactProps | AgReactUiProps>): AgGridReact', gave the following error. Type '{ ref: RefObject; onGridReady: (params: any) => void; columnDefs: any[]; gridOptions: { columnDefs: never[]; reactUi: boolean; groupHeaderHeight: number; ... 18 more ...; frameworkComponents: { ...; }; }; rowData: any[] | undefined; onRangeSelectionChanged: (event: RangeSelectionChangedEvent) => void; d...' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes & (Readonly<AgGridReactProps | AgReactUiProps> & Readonly<...>))'. Property 'onGridReady' does not exist on type 'IntrinsicAttributes & (IntrinsicClassAttributes & (Readonly<AgGridReactProps | AgReactUiProps> & Readonly<...>))'. Overload 2 of 2, '(props: AgGridReactProps | AgReactUiProps, context: any): AgGridReact', gave the following error. Type '{ ref: RefObject; onGridReady: (params: any) => void; columnDefs: any[]; gridOptions: { columnDefs: never[]; reactUi: boolean; groupHeaderHeight: number; ... 18 more ...; frameworkComponents: { ...; }; }; rowData: any[] | undefined; onRangeSelectionChanged: (event: RangeSelectionChangedEvent) => void; d...' is not assignable to type 'IntrinsicAttributes & (IntrinsicClassAttributes & (Readonly<AgGridReactProps | AgReactUiProps> & Readonly<...>))'. Property 'onGridReady' does not exist on type 'IntrinsicAttributes & (IntrinsicClassAttributes & (Readonly<AgGridReactProps | AgReactUiProps> & Readonly<...>))'.

Answer 1

Install the NPM packcage @ag-grid-community/react instead of ag-grid-react.

The reason is because ag-grid-react is meant to be only used with ag-grid-community or ag-grid-enterprise.

You can read more about this in the documentation