React TypeScript项目中ag-grid Enterprise版本引入Master Detail模块时出现Module类型不兼容编译错误

这个错误的核心原因是你项目中同时存在两套AG Grid的依赖包和类型定义，导致TypeScript无法识别不同路径下的Module类型为同一类型。具体来说，你同时安装了@ag-grid-community/react（新版包）和ag-grid-react（旧版包），还有重复的ag-grid-community和@ag-grid-community/*子包，这些重复依赖引发了类型冲突。

解决方案步骤： #

1. 清理重复的AG Grid依赖

首先卸载所有重复的旧版AG Grid包，只保留新版的社区/企业包：

npm uninstall ag-grid-react ag-grid-enterprise ag-grid-community

2. 更新package.json中的依赖

修改后的package.json依赖部分应该如下（确保所有AG Grid包版本统一且仅保留必要项）：

"dependencies": {
  "@ag-grid-community/react": "^25.3.0",
  "@ag-grid-community/client-side-row-model": "^25.3.0",
  "@ag-grid-community/csv-export": "^25.3.0",
  "@ag-grid-enterprise/excel-export": "^25.3.0",
  "@ag-grid-enterprise/master-detail": "^25.3.0"
}

3. 调整组件中的导入语句

统一使用新版的导入路径，确保所有AG Grid相关导入都来自@ag-grid-community/或@ag-grid-enterprise/命名空间：

import React from 'react';
// 仅使用新版React绑定
import { AgGridReact } from '@ag-grid-community/react';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { MasterDetailModule } from '@ag-grid-enterprise/master-detail';
// 样式也从新版包导入（规范统一）
import '@ag-grid-community/styles/ag-grid.css';
import '@ag-grid-community/styles/ag-theme-balham.css';

interface IGridview {
  columnMetadata: any;
  data: any;
  rowSelection?: string;
  overlayNoRowsMessage?: string;
  detailCellRendererParams?: any;
  isRowMaster?: any;
}

const Gridview: React.FC<IGridview> = (props) => {
  const {
    columnMetadata,
    data,
    rowSelection = 'single',
    overlayNoRowsMessage = 'No results',
    detailCellRendererParams,
    isRowMaster,
  } = props;

  const masterDetailModule = [ClientSideRowModelModule, MasterDetailModule];

  return (
    <div className="ag-theme-balham" style={{ height: 700, width: 1800 }}>
      <AgGridReact
        rowData={data}
        columnDefs={columnMetadata}
        overlayNoRowsTemplate={overlayNoRowsMessage}
        rowSelection={rowSelection}
        masterDetail={true}
        modules={masterDetailModule}
        isRowMaster={isRowMaster}
        detailCellRendererParams={detailCellRendererParams}
      ></AgGridReact>
    </div>
  );
};

export default Gridview;

4. 重新安装依赖并清理缓存

执行以下命令确保依赖安装正确：

rm -rf node_modules package-lock.json
npm install

问题根源说明 #

AG Grid在版本迭代中重构了包结构，推出了@ag-grid-community/和@ag-grid-enterprise/的命名空间包，而ag-grid-react、ag-grid-community属于旧版包结构。同时安装新旧包会让TypeScript加载两套不同的Module类型定义，自然会触发"类型不可分配"的编译错误。统一使用新版包后，所有模块的类型都来自同一套定义，冲突也就解决了。

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