如何解决AG Grid报错‘AG Grid: Failed to create grid.’？

云上老周

2026-6-23

AG Grid模块化导入后组件创建失败排查

我采用AG Grid的模块化导入方式，仅引入所需依赖包：

{
  "@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"
}

实现的可复用组件代码如下：

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

浏览器中出现如下错误：
AG Grid创建失败报错截图

可能的问题点：

forwardRef语法错误：代码中forwardRef的写法不完整，缺少函数参数和包裹代码的大括号。正确写法需补充参数与函数体：
```
const AgGrid = forwardRef<AgGridReact, GridProps>((props, ref) => {
  return (
    // 组件内容
  )
})
```
GridProps未定义：如果使用TypeScript，GridProps类型未导入或声明会导致类型错误；如果是JavaScript代码，应直接移除泛型声明，避免语法报错。
未传递ref给AgGridReact：forwardRef拿到的ref需要传递给内部的AgGridReact组件，需添加ref={ref}属性：<AgGridReact ref={ref} ... />
冗余代码未清理：导入了useMemo但未实际使用，虽不影响运行，但属于无效代码，可考虑移除。