Being relatively new to Next.js and web development in general, my background mainly consists of working with compiled languages. I recently embarked on a project to build a web app using Ag-Grid, drawing inspiration from an example I found on a public GitHub repository that I managed to successfully set up and run: https://github.com/zealousAnemone/ag-grid-next-app/blob/main/pages/index.js
However, despite making some adjustments to the code (such as importing router from next/navigation and changing the location of ag-grid CSS imports), my npm run build command continues to fail.
`'use client'
import { useState, useEffect, useCallback, useRef } from 'react';
import { useRouter } from 'next/navigation';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
const Home = () => {
const gridRef = useRef();
const router = useRouter();
const [rowData, setRowData] = useState([]);
useEffect(() => {
fetch('../api/staff')
.then((response) => response.json())
.then((data) => setRowData(data.rows));
}, []);
const onSelectionChanged = useCallback(() => {
}, []);
const defaultColDef = {
resizable: true,
sortable: true,
};
const [columnDefs] = useState([
{ headerName: 'First Name', field: 'first_name' },
{ headerName: 'Last Name', field: 'last_name' },
{ headerName: 'Job Title', field: 'job_title' },
{ field: 'office' },
{ field: 'email' },
{ field: 'phone' },
]);
return (
<div className="ag-theme-alpine" style={{ height: '600px' }}>
<AgGridReact
id="staff_grid"
ref={gridRef}
rowData={rowData}
defaultColDef={defaultColDef}
columnDefs={columnDefs}
onSelectionChanged={onSelectionChanged}
rowSelection={'single'}
style={{ height: '100%', width: '100%' }}
></AgGridReact>
</div>
);
};
export default Home;`
The error generated during the build process is as follows:
./app/dashboard/AgGrid/page.tsx:39:7
Type error: No overload matches this call.
Overload 2 of 2, '(props: AgGridReactProps<never> | AgReactUiProps<never>, context: any): AgGridReact<never>', gave the following error.
Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<AgGridReact<never>> | undefined'.
Overload 2 of 2, '(props: AgGridReactProps<never> | AgReactUiProps<never>, context: any): AgGridReact<never>', gave the following error.
Type '({ headerName: string; field: string; } | { field: string; headerName?: undefined; })[]' is not assignable to type '(ColDef<never, any> | ColGroupDef<never>)[]'.
37 | return (
38 | <div className="ag-theme-alpine" style={{ height: '600px' }}>
> 39 | <AgGridReact
| ^
40 | id="staff_grid"
41 | ref={gridRef}
42 | rowData={rowData}