AG Grid React组件导出前设置许可证无效，该如何解决？

我们在项目中使用AG Grid，希望通过副作用在导出React组件前全局设置许可证，避免每次使用网格组件时重复配置。但当前尝试的方法无效：在仓库的GridSupport.js中，导入@ag-grid-enterprise/core的LicenseManager并设置密钥后，导出@ag-grid-community/react的AgGridReact，许可证并未生效。原本以为副作用会在导入/导出前执行，推测是构建工具Gulp影响了执行顺序。

原代码示例 #

GridSupport.js

/**
 * AG Grid License
 */
import { LicenseManager } from "@ag-grid-enterprise/core";
LicenseManager.setLicenseKey('…some license key…');

// Export below happens, but no license set above :(

export { AgGridReact as default } from "@ag-grid-community/react";

Grid.js

import { AgGridReact } from 'GridSupport';

const Grid = (props) => {
  // 期望AgGridReact使用时不打印许可证警告
  return <AgGridReact {...props} />
}

替代方案 #

1. 包装AgGridReact组件，在初始化阶段设置许可证 #

修改GridSupport.js，自行封装一个组件，确保许可证在网格渲染前完成设置：

import { LicenseManager } from "@ag-grid-enterprise/core";
import { AgGridReact } from "@ag-grid-community/react";
import React from 'react';

// 标记许可证是否已设置，避免重复执行
let licenseSet = false;

const GridWithLicense = (props) => {
  if (!licenseSet) {
    LicenseManager.setLicenseKey('…some license key…');
    licenseSet = true;
  }
  return <AgGridReact {...props} />;
};

export default GridWithLicense;

之后在Grid.js中直接导入这个包装后的组件：

import GridWithLicense from 'GridSupport';

const Grid = (props) => {
  return <GridWithLicense {...props} />
}

这种方式利用React组件的渲染时机，确保许可证设置逻辑优先执行，不受构建工具模块解析顺序的影响。

2. 单独创建许可证初始化模块，强制优先加载 #

创建独立的ag-grid-license.js文件：

import { LicenseManager } from "@ag-grid-enterprise/core";
LicenseManager.setLicenseKey('…some license key…');

然后在项目的入口文件（如index.js或App.js）中，优先导入这个模块：

import './ag-grid-license';
// 再导入其他依赖和组件
import Grid from './Grid';

这种方式能保证许可证在任何AG Grid组件加载前完成配置，彻底规避模块加载顺序问题。

3. 调整Gulp构建配置，确保副作用代码优先执行 #

如果必须保留原有的导出方式，可以检查Gulp的打包配置（若底层使用Rollup或Webpack），确保GridSupport.js中的副作用代码不会被tree-shaking或延迟执行。比如在Webpack配置中给@ag-grid-enterprise/core标记sideEffects: true，或调整Gulp打包流程的模块处理顺序，让许可证设置代码优先执行。不过这种方案对构建配置依赖较强，通用性不如前两种。

内容的提问来源于stack exchange，提问作者Michael Johansen