单页使用多个ag-grid组件时出现Maximum call stack size exceeded错误

安全阿岳

2026-8-13

解决单页面部署多个AG-Grid组件时的栈溢出错误

当单页面使用AG-Grid Enterprise部署多个表格组件时，会触发栈溢出错误，错误信息如下：

ag-grid-enterprise.min.js:8 Uncaught RangeError: Maximum call stack size exceeded
    at h (ag-grid-enterprise.min.js:8:100503)
    at ag-grid-enterprise.min.js:8:100725
    at ag-grid-enterprise.min.js:8:99580
    at Array.forEach (<anonymous>)
    at n (ag-grid-enterprise.min.js:8:99552)
    at h (ag-grid-enterprise.min.js:8:100572)
    at ag-grid-enterprise.min.js:8:100725
    at ag-grid-enterprise.min.js:8:99580
    at Array.forEach (<anonymous>)
    at n (ag-grid-enterprise.min.js:8:99552)

以下是几种常见的排查和解决方法：

避免重复注册AG-Grid Enterprise模块
不要在每个表格组件内重复调用registerEnterpriseModules()或类似的模块注册方法。这类初始化操作应该只在应用全局入口（比如main.js、index.js）执行一次，所有表格共享全局注册的模块：
```
// 全局入口文件（仅执行一次）
import { registerEnterpriseModules } from 'ag-grid-enterprise';
registerEnterpriseModules();
```

确保每个表格使用独立的配置对象
多个表格如果共用同一个gridOptions、columnDefs或其他核心配置对象，可能会引发内部循环更新导致栈溢出。要为每个表格创建独立的配置副本：

// 错误示例：多个表格共用同一配置
const sharedConfig = { enableRangeSelection: true, ... };

// 正确示例：为每个表格生成独立配置
const table1Config = { ...sharedConfig };
// 复杂配置用深拷贝
const table2Config = JSON.parse(JSON.stringify(sharedConfig));