reactjstypescriptag-grid-react

How to solve error "AG Grid: Failed to create grid."?

I used the modular import of AG-grid, where each needed module is imported instead of the whole package:

    "@ag-grid-community/core": "31.3.2",
    "@ag-grid-community/react": "31.3.2",
    "@ag-grid-community/styles": "31.3.2",
    "@ag-grid-enterprise/core": "31.3.2"

And I implemented the following reusable component:

import { forwardRef, useMemo } from 'react'
import { AgGridReact } from '@ag-grid-community/react'
import { LicenseManager } from '@ag-grid-enterprise/core'
import '@ag-grid-community/styles/ag-grid.css'
import '@ag-grid-community/styles/ag-theme-quartz.css'

LicenseManager.setLicenseKey('xxx')

const AgGrid = forwardRef<AgGridReact, GridProps>(

    return (
      <div style={{height: '500px', width: '600px'}} className={'ag-theme-quartz'}>
        <AgGridReact
          rowData={[
            { make: 'Toyota', model: 'Celica', price: 35000 },
            { make: 'Ford', model: 'Mondeo', price: 32000 },
            { make: 'Porsche', model: 'Boxster', price: 72000 },
          ]}
          columnDefs={[
            { headerName: 'Make', field: 'make' },
            { headerName: 'Model', field: 'model' },
            { headerName: 'Price', field: 'price' },
          ]}
        />
      </div>
    )
  },
)

export default AgGrid

On browser, I get the following error: enter image description here

Would you have any idea where the issue may lie? (any hint is much appreciated).

Solution

  • I found the issue in imports. I had to import ClientSideRowModelModule and it worked like a charm.

    import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model'
import { ModuleRegistry } from '@ag-grid-community/core'
import { AgGridReact } from '@ag-grid-community/react'
import { LicenseManager } from '@ag-grid-enterprise/core'


ModuleRegistry.registerModules([
  ClientSideRowModelModule
])