添加“ag-grid-enterprise”时，最简单的 ag-grid 过滤器示例失败

【问题标题】：Simpliest ag-grid filter example fails when adding 'ag-grid-enterprise'添加“ag-grid-enterprise”时，最简单的 ag-grid 过滤器示例失败
【发布时间】：2021-01-30 05:06:26
【问题描述】：

我们有一个超简单的例子，在单列上有一个排序选项。

function Table(): JSX.Element {
  return (
    <div className="ag-theme-balham" style={{ height: 400, width: 600 }}>
      <AgGridReact
        rowData={[
          { make: 'Toyota', model: 'Celica', price: 35000 },
          { make: 'Ford', model: 'Mondeo', price: 32000 },
          { make: 'Porsche', model: 'Boxter', price: 72000 },
        ]}
      >
        <AgGridColumn filter field="make"></AgGridColumn>
        <AgGridColumn field="model"></AgGridColumn>
        <AgGridColumn field="price"></AgGridColumn>
      </AgGridReact>
    </div>
  )

即使添加了“ag-grid-enterprise”功能，该示例也适用于我们的项目之外。

但是，当放入我们的项目时，完全相同的代码仅在不导入企业包时才有效。一旦我们导入它（并期望获得企业级过滤器），我们就会收到以下错误：

ag-grid-enterprise.cjs.js:36407 Uncaught TypeError: Cannot read property 'getGui' of undefined
    at EnterpriseMenuFactory.showMenu (ag-grid-enterprise.cjs.js:36407)
    at EnterpriseMenuFactory.showMenuAfterButtonClick (ag-grid-enterprise.cjs.js:36364)
    at HeaderComp.showMenu (ag-grid-community.cjs.js:11893)
    at HTMLSpanElement.<anonymous> (ag-grid-community.cjs.js:11886)
EnterpriseMenuFactory.showMenu @ ag-grid-enterprise.cjs.js:36407
EnterpriseMenuFactory.showMenuAfterButtonClick @ ag-grid-enterprise.cjs.js:36364
HeaderComp.showMenu @ ag-grid-community.cjs.js:11893
(anonymous) @ ag-grid-community.cjs.js:11886
ag-grid-community.cjs.js:2793 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at ToolPanelColumnComp.BeanStub.addManagedListener (ag-grid-community.cjs.js:2793)
    at ToolPanelColumnComp.init (ag-grid-enterprise.cjs.js:1055)
    at ag-grid-community.cjs.js:1019
    at Array.forEach (<anonymous>)
    at Context.callLifeCycleMethodsOnBean (ag-grid-community.cjs.js:1019)
    at ag-grid-community.cjs.js:1002
    at Array.forEach (<anonymous>)
    at Context.callLifeCycleMethods (ag-grid-community.cjs.js:1002)
    at Context.wireBeans (ag-grid-community.cjs.js:881)
    at Context.createBean (ag-grid-community.cjs.js:869)
    at PrimaryColsListPanel.createComponentFromItem (ag-grid-enterprise.cjs.js:1279)
    at VirtualList.componentCreator (ag-grid-enterprise.cjs.js:1267)
    at VirtualList.insertRow (ag-grid-community.cjs.js:41196)
    at VirtualList.ensureRowsRendered (ag-grid-community.cjs.js:41175)
    at VirtualList.drawVirtualRows (ag-grid-community.cjs.js:41158)
    at ag-grid-community.cjs.js:41145
BeanStub.addManagedListener @ ag-grid-community.cjs.js:2793
ToolPanelColumnComp.init @ ag-grid-enterprise.cjs.js:1055
(anonymous) @ ag-grid-community.cjs.js:1019
Context.callLifeCycleMethodsOnBean @ ag-grid-community.cjs.js:1019
(anonymous) @ ag-grid-community.cjs.js:1002
Context.callLifeCycleMethods @ ag-grid-community.cjs.js:1002
Context.wireBeans @ ag-grid-community.cjs.js:881
Context.createBean @ ag-grid-community.cjs.js:869
PrimaryColsListPanel.createComponentFromItem @ ag-grid-enterprise.cjs.js:1279
(anonymous) @ ag-grid-enterprise.cjs.js:1267
VirtualList.insertRow @ ag-grid-community.cjs.js:41196
VirtualList.ensureRowsRendered @ ag-grid-community.cjs.js:41175
VirtualList.drawVirtualRows @ ag-grid-community.cjs.js:41158
(anonymous) @ ag-grid-community.cjs.js:41145
setTimeout (async)
VirtualList.refresh @ ag-grid-community.cjs.js:41140
PrimaryColsListPanel.flattenAndFilterModel @ ag-grid-enterprise.cjs.js:1374
PrimaryColsListPanel.setColumnLayout @ ag-grid-enterprise.cjs.js:1305
ToolPanelColDefService.syncLayoutWithGrid @ ag-grid-enterprise.cjs.js:4920
PrimaryColsListPanel.buildTreeFromWhatGridIsDisplaying @ ag-grid-enterprise.cjs.js:1295
PrimaryColsListPanel.onColumnsChanged @ ag-grid-enterprise.cjs.js:1286
PrimaryColsListPanel.init @ ag-grid-enterprise.cjs.js:1269
PrimaryColsPanel.init @ ag-grid-enterprise.cjs.js:4149
EnterpriseMenu.createColumnsPanel @ ag-grid-enterprise.cjs.js:36681
EnterpriseMenu.createTab @ ag-grid-enterprise.cjs.js:36510
(anonymous) @ ag-grid-enterprise.cjs.js:36464
EnterpriseMenu.init @ ag-grid-enterprise.cjs.js:36464
(anonymous) @ ag-grid-community.cjs.js:1019
Context.callLifeCycleMethodsOnBean @ ag-grid-community.cjs.js:1019
(anonymous) @ ag-grid-community.cjs.js:1002
Context.callLifeCycleMethods @ ag-grid-community.cjs.js:1002
Context.wireBeans @ ag-grid-community.cjs.js:881
Context.createBean @ ag-grid-community.cjs.js:869
BeanStub.createBean @ ag-grid-community.cjs.js:2818
EnterpriseMenuFactory.showMenu @ ag-grid-enterprise.cjs.js:36387
EnterpriseMenuFactory.showMenuAfterButtonClick @ ag-grid-enterprise.cjs.js:36364
HeaderComp.showMenu @ ag-grid-community.cjs.js:11893
(anonymous) @ ag-grid-community.cjs.js:11886
ag-grid-community.cjs.js:2793 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at ToolPanelColumnComp.BeanStub.addManagedListener (ag-grid-community.cjs.js:2793)
    at ToolPanelColumnComp.init (ag-grid-enterprise.cjs.js:1055)
    at ag-grid-community.cjs.js:1019
    at Array.forEach (<anonymous>)
    at Context.callLifeCycleMethodsOnBean (ag-grid-community.cjs.js:1019)
    at ag-grid-community.cjs.js:1002
    at Array.forEach (<anonymous>)
    at Context.callLifeCycleMethods (ag-grid-community.cjs.js:1002)
    at Context.wireBeans (ag-grid-community.cjs.js:881)
    at Context.createBean (ag-grid-community.cjs.js:869)
    at PrimaryColsListPanel.createComponentFromItem (ag-grid-enterprise.cjs.js:1279)
    at VirtualList.componentCreator (ag-grid-enterprise.cjs.js:1267)
    at VirtualList.insertRow (ag-grid-community.cjs.js:41196)
    at VirtualList.ensureRowsRendered (ag-grid-community.cjs.js:41175)
    at VirtualList.drawVirtualRows (ag-grid-community.cjs.js:41158)
    at ag-grid-community.cjs.js:41145
BeanStub.addManagedListener @ ag-grid-community.cjs.js:2793
ToolPanelColumnComp.init @ ag-grid-enterprise.cjs.js:1055
(anonymous) @ ag-grid-community.cjs.js:1019
Context.callLifeCycleMethodsOnBean @ ag-grid-community.cjs.js:1019
(anonymous) @ ag-grid-community.cjs.js:1002
Context.callLifeCycleMethods @ ag-grid-community.cjs.js:1002
Context.wireBeans @ ag-grid-community.cjs.js:881
Context.createBean @ ag-grid-community.cjs.js:869
PrimaryColsListPanel.createComponentFromItem @ ag-grid-enterprise.cjs.js:1279
(anonymous) @ ag-grid-enterprise.cjs.js:1267
VirtualList.insertRow @ ag-grid-community.cjs.js:41196
VirtualList.ensureRowsRendered @ ag-grid-community.cjs.js:41175
VirtualList.drawVirtualRows @ ag-grid-community.cjs.js:41158
(anonymous) @ ag-grid-community.cjs.js:41145
setTimeout (async)
VirtualList.refresh @ ag-grid-community.cjs.js:41140
PrimaryColsListPanel.flattenAndFilterModel @ ag-grid-enterprise.cjs.js:1374
PrimaryColsListPanel.onColumnsChanged @ ag-grid-enterprise.cjs.js:1292
PrimaryColsListPanel.init @ ag-grid-enterprise.cjs.js:1269
PrimaryColsPanel.init @ ag-grid-enterprise.cjs.js:4149
EnterpriseMenu.createColumnsPanel @ ag-grid-enterprise.cjs.js:36681
EnterpriseMenu.createTab @ ag-grid-enterprise.cjs.js:36510
(anonymous) @ ag-grid-enterprise.cjs.js:36464
EnterpriseMenu.init @ ag-grid-enterprise.cjs.js:36464
(anonymous) @ ag-grid-community.cjs.js:1019
Context.callLifeCycleMethodsOnBean @ ag-grid-community.cjs.js:1019
(anonymous) @ ag-grid-community.cjs.js:1002
Context.callLifeCycleMethods @ ag-grid-community.cjs.js:1002
Context.wireBeans @ ag-grid-community.cjs.js:881
Context.createBean @ ag-grid-community.cjs.js:869
BeanStub.createBean @ ag-grid-community.cjs.js:2818
EnterpriseMenuFactory.showMenu @ ag-grid-enterprise.cjs.js:36387
EnterpriseMenuFactory.showMenuAfterButtonClick @ ag-grid-enterprise.cjs.js:36364
HeaderComp.showMenu @ ag-grid-community.cjs.js:11893
(anonymous) @ ag-grid-community.cjs.js:11886
8[Violation] 'setTimeout' handler took <N>ms
ag-grid-enterprise.cjs.js:36407 Uncaught TypeError: Cannot read property 'getGui' of undefined
    at EnterpriseMenuFactory.showMenu (ag-grid-enterprise.cjs.js:36407)
    at EnterpriseMenuFactory.showMenuAfterButtonClick (ag-grid-enterprise.cjs.js:36364)
    at HeaderComp.showMenu (ag-grid-community.cjs.js:11893)
    at HTMLSpanElement.<anonymous> (ag-grid-community.cjs.js:11886)
EnterpriseMenuFactory.showMenu @ ag-grid-enterprise.cjs.js:36407
EnterpriseMenuFactory.showMenuAfterButtonClick @ ag-grid-enterprise.cjs.js:36364
HeaderComp.showMenu @ ag-grid-community.cjs.js:11893
(anonymous) @ ag-grid-community.cjs.js:11886
ag-grid-community.cjs.js:2793 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at ToolPanelColumnComp.BeanStub.addManagedListener (ag-grid-community.cjs.js:2793)
    at ToolPanelColumnComp.init (ag-grid-enterprise.cjs.js:1055)
    at ag-grid-community.cjs.js:1019
    at Array.forEach (<anonymous>)
    at Context.callLifeCycleMethodsOnBean (ag-grid-community.cjs.js:1019)
    at ag-grid-community.cjs.js:1002
    at Array.forEach (<anonymous>)
    at Context.callLifeCycleMethods (ag-grid-community.cjs.js:1002)
    at Context.wireBeans (ag-grid-community.cjs.js:881)
    at Context.createBean (ag-grid-community.cjs.js:869)
    at PrimaryColsListPanel.createComponentFromItem (ag-grid-enterprise.cjs.js:1279)
    at VirtualList.componentCreator (ag-grid-enterprise.cjs.js:1267)
    at VirtualList.insertRow (ag-grid-community.cjs.js:41196)
    at VirtualList.ensureRowsRendered (ag-grid-community.cjs.js:41175)
    at VirtualList.drawVirtualRows (ag-grid-community.cjs.js:41158)
    at ag-grid-community.cjs.js:41145
BeanStub.addManagedListener @ ag-grid-community.cjs.js:2793
ToolPanelColumnComp.init @ ag-grid-enterprise.cjs.js:1055
(anonymous) @ ag-grid-community.cjs.js:1019
Context.callLifeCycleMethodsOnBean @ ag-grid-community.cjs.js:1019
(anonymous) @ ag-grid-community.cjs.js:1002
Context.callLifeCycleMethods @ ag-grid-community.cjs.js:1002
Context.wireBeans @ ag-grid-community.cjs.js:881
Context.createBean @ ag-grid-community.cjs.js:869
PrimaryColsListPanel.createComponentFromItem @ ag-grid-enterprise.cjs.js:1279
(anonymous) @ ag-grid-enterprise.cjs.js:1267
VirtualList.insertRow @ ag-grid-community.cjs.js:41196
VirtualList.ensureRowsRendered @ ag-grid-community.cjs.js:41175
VirtualList.drawVirtualRows @ ag-grid-community.cjs.js:41158
(anonymous) @ ag-grid-community.cjs.js:41145
setTimeout (async)
VirtualList.refresh @ ag-grid-community.cjs.js:41140
PrimaryColsListPanel.flattenAndFilterModel @ ag-grid-enterprise.cjs.js:1374
PrimaryColsListPanel.setColumnLayout @ ag-grid-enterprise.cjs.js:1305
ToolPanelColDefService.syncLayoutWithGrid @ ag-grid-enterprise.cjs.js:4920
PrimaryColsListPanel.buildTreeFromWhatGridIsDisplaying @ ag-grid-enterprise.cjs.js:1295
PrimaryColsListPanel.onColumnsChanged @ ag-grid-enterprise.cjs.js:1286
PrimaryColsListPanel.init @ ag-grid-enterprise.cjs.js:1269
PrimaryColsPanel.init @ ag-grid-enterprise.cjs.js:4149
EnterpriseMenu.createColumnsPanel @ ag-grid-enterprise.cjs.js:36681
EnterpriseMenu.createTab @ ag-grid-enterprise.cjs.js:36510
(anonymous) @ ag-grid-enterprise.cjs.js:36464
EnterpriseMenu.init @ ag-grid-enterprise.cjs.js:36464
(anonymous) @ ag-grid-community.cjs.js:1019
Context.callLifeCycleMethodsOnBean @ ag-grid-community.cjs.js:1019
(anonymous) @ ag-grid-community.cjs.js:1002
Context.callLifeCycleMethods @ ag-grid-community.cjs.js:1002
Context.wireBeans @ ag-grid-community.cjs.js:881
Context.createBean @ ag-grid-community.cjs.js:869
BeanStub.createBean @ ag-grid-community.cjs.js:2818
EnterpriseMenuFactory.showMenu @ ag-grid-enterprise.cjs.js:36387
EnterpriseMenuFactory.showMenuAfterButtonClick @ ag-grid-enterprise.cjs.js:36364
HeaderComp.showMenu @ ag-grid-community.cjs.js:11893
(anonymous) @ ag-grid-community.cjs.js:11886
ag-grid-community.cjs.js:2793 Uncaught TypeError: Cannot read property 'addEventListener' of undefined
    at ToolPanelColumnComp.BeanStub.addManagedListener (ag-grid-community.cjs.js:2793)
    at ToolPanelColumnComp.init (ag-grid-enterprise.cjs.js:1055)
    at ag-grid-community.cjs.js:1019
    at Array.forEach (<anonymous>)
    at Context.callLifeCycleMethodsOnBean (ag-grid-community.cjs.js:1019)
    at ag-grid-community.cjs.js:1002
    at Array.forEach (<anonymous>)
    at Context.callLifeCycleMethods (ag-grid-community.cjs.js:1002)
    at Context.wireBeans (ag-grid-community.cjs.js:881)
    at Context.createBean (ag-grid-community.cjs.js:869)
    at PrimaryColsListPanel.createComponentFromItem (ag-grid-enterprise.cjs.js:1279)
    at VirtualList.componentCreator (ag-grid-enterprise.cjs.js:1267)
    at VirtualList.insertRow (ag-grid-community.cjs.js:41196)
    at VirtualList.ensureRowsRendered (ag-grid-community.cjs.js:41175)
    at VirtualList.drawVirtualRows (ag-grid-community.cjs.js:41158)
    at ag-grid-community.cjs.js:41145
BeanStub.addManagedListener @ ag-grid-community.cjs.js:2793
ToolPanelColumnComp.init @ ag-grid-enterprise.cjs.js:1055
(anonymous) @ ag-grid-community.cjs.js:1019
Context.callLifeCycleMethodsOnBean @ ag-grid-community.cjs.js:1019
(anonymous) @ ag-grid-community.cjs.js:1002
Context.callLifeCycleMethods @ ag-grid-community.cjs.js:1002
Context.wireBeans @ ag-grid-community.cjs.js:881
Context.createBean @ ag-grid-community.cjs.js:869
PrimaryColsListPanel.createComponentFromItem @ ag-grid-enterprise.cjs.js:1279
(anonymous) @ ag-grid-enterprise.cjs.js:1267
VirtualList.insertRow @ ag-grid-community.cjs.js:41196
VirtualList.ensureRowsRendered @ ag-grid-community.cjs.js:41175
VirtualList.drawVirtualRows @ ag-grid-community.cjs.js:41158
(anonymous) @ ag-grid-community.cjs.js:41145
setTimeout (async)
VirtualList.refresh @ ag-grid-community.cjs.js:41140
PrimaryColsListPanel.flattenAndFilterModel @ ag-grid-enterprise.cjs.js:1374
PrimaryColsListPanel.onColumnsChanged @ ag-grid-enterprise.cjs.js:1292
PrimaryColsListPanel.init @ ag-grid-enterprise.cjs.js:1269
PrimaryColsPanel.init @ ag-grid-enterprise.cjs.js:4149
EnterpriseMenu.createColumnsPanel @ ag-grid-enterprise.cjs.js:36681
EnterpriseMenu.createTab @ ag-grid-enterprise.cjs.js:36510
(anonymous) @ ag-grid-enterprise.cjs.js:36464
EnterpriseMenu.init @ ag-grid-enterprise.cjs.js:36464
(anonymous) @ ag-grid-community.cjs.js:1019
Context.callLifeCycleMethodsOnBean @ ag-grid-community.cjs.js:1019
(anonymous) @ ag-grid-community.cjs.js:1002
Context.callLifeCycleMethods @ ag-grid-community.cjs.js:1002
Context.wireBeans @ ag-grid-community.cjs.js:881
Context.createBean @ ag-grid-community.cjs.js:869
BeanStub.createBean @ ag-grid-community.cjs.js:2818
EnterpriseMenuFactory.showMenu @ ag-grid-enterprise.cjs.js:36387
EnterpriseMenuFactory.showMenuAfterButtonClick @ ag-grid-enterprise.cjs.js:36364
HeaderComp.showMenu @ ag-grid-community.cjs.js:11893
(anonymous) @ ag-grid-community.cjs.js:11886
webpackHotDevClient.js:76 The development server has disconnected.
Refresh the page if necessary.

我对 package.json 的依赖：

"dependencies": {
    "@ant-design/icons": "^4.2.2",
    "@apollo/client": "^3.1.1",
    "@types/pluralize": "^0.0.29",
    "ag-grid-community": "^24.0.0",
    "ag-grid-enterprise": "^24.1.0",
    "ag-grid-react": "^24.0.0",
    "antd": "^4.6.6",
    "axios": "^0.19.2",
    "bizcharts": "^4.0.14",
    "firebase": "^7.17.1",
    "formik": "^2.1.7",
    "graphql": "^15.3.0",
    "lodash": "^4.17.20",
    "lodash-decorators": "^6.0.1",
    "marked": "^1.2.0",
    "moment": "^2.29.1",
    "pluralize": "^8.0.0",
    "query-string": "^6.13.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-hook-form": "^6.2.0",
    "react-hot-loader": "^4.12.21",
    "react-markdown-editor-lite": "^1.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-select": "^3.1.0",
    "react-slick": "^0.27.0",
    "resize-observer-polyfill": "^1.5.1",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.1.1"
  },

有什么想法吗？

【问题讨论】：

  • 请添加您的package.json 文件。
  • 同样的问题，还有解决方案吗？
  • 我也有同样的问题。

标签： reactjs typescript ag-grid


【解决方案1】：

尝试在 setGridData 下添加如下代码：

import { AllModules } from '@ag-grid-enterprise/all-modules';
setGridData({
              modules: AllModules,
columnDefs: []
})

【讨论】：

  • 请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更好，并且更有可能吸引投票
猜你喜欢
  • 2020-08-19
  • 2019-04-20
  • 2020-03-31
  • 1970-01-01
  • 2020-06-12
  • 2019-07-28
  • 2016-06-15
  • 2020-03-07
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode