Как устранить ошибку «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

В браузере я получаю следующую ошибку:

Есть ли у вас какие-либо идеи, в чем может заключаться проблема? (любой намек очень ценится).

reactjs typescript ag-grid-react

06.06.2024 13:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

118

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел проблему в импорте. Мне пришлось импортировать ClientSideRowModelModule, и это сработало как часы.

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
])

06.06.2024 14:56

Другие вопросы по теме

Ввод импортированных компонентов в Vue 3

Как добавить объект JSON внутри тега сценария в NextJS

Условный тип и доступ к индексу не работают должным образом

Индивидуальный таймаут на запросы изображений в драматурге

Angular 17 и автономное структурирование компонентов

Как визуализировать сноски с отсутствующими определениями, используя реакции-уценку и примечание-gfm

Почему мое модальное оповещение от ShadCn закрывается сразу после того, как я нажимаю на него?

Имитационный импорт лениво загруженного автономного компонента

Как создать синхронный цикл for?

Angular MongoDB меняет идентификатор данных ответа, но все равно получает идентификатор данных запроса

Как устранить ошибку «AG Grid: не удалось создать сетку»?

Ответы 1

Другие вопросы по теме

Похожие вопросы