Reactjs ag-grid Module conversion - Module[] is not assignable to type (/ag-grid-community/dist/lib/interfaces/iModule).Module[]

Question

I am using ag-grid enterprise version in typescript react application. It works perfectly fine but when I add the below line to implement the detailed grid feature, it is throwing compilation error as mentioned below.

modules={masterDetailModule} <--- this is the line giving the compile error.

No overload matches this call. Overload 1 of 2, '(props: AgGridReactProps | Readonly): AgGridReact', gave the following error. Type 'import("../node_modules/@ag-grid-community/core/dist/cjs/interfaces/iModule").Module[]' is not assignable to type 'import("../node_modules/ag-grid-community/dist/lib/interfaces/iModule").Module[]'.

Gridview.tsx

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { MasterDetailModule } from '@ag-grid-enterprise/master-detail';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/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;

This is my package.json file.

  {
  "name": "react-aggrid",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
 "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",
    "ag-grid-community": "^25.3.0",
    "ag-grid-enterprise": "^25.3.0",
    "ag-grid-react": "^25.3.0"
    }
  "devDependencies": {
    "@sheerun/mutationobserver-shim": "^0.3.3",
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/react": "^10.4.6",
    "@testing-library/user-event": "^12.0.11",
    "@types/jest": "^25.2.1",
    "@types/lodash": "^4.14.162",
    "@types/node": "^13.13.4",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.7",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.5",
    "cross-env": "^7.0.3",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "msw": "^0.19.3",
    "npm-run-all": "^4.1.5",
    "react-scripts": "^3.4.1",
    "redux-logger": "^3.0.6",
    "typescript": "^3.8.3"
  }
}

Answer 1

You're mixing modules and packages.

You cannot mix packages and modules - in other words you cannot have a mix of the following types of dependencies:

"dependencies": {
    "ag-grid-community": "~25.3.0" <- a package dependency
    "@ag-grid-enterprise/all-modules": "~25.3.0"  <- a module dependency
    //...other dependencies...
}

So in your project, replace this line:

import { AgGridReact } from 'ag-grid-react';

with the following line:

import { AgGridReact } from '@ag-grid-community/react';

Then replace the following lines:

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

with the following line:

import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';