ag-grid javascript library gives max call stack error when using multiple grids on a single page

Question

There is an error that shows from ag-grid when you use multiple grids on a single page when using the ag-grid javascript library:

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)

Answer 1

The reason was because I was re-using the same "gridOptions" across grids. The solution was to generate a new one each time a gridOption object was needed via a function:

function createGridOptions() {
// Grid Options are properties passed to the grid
    const gridOptions = {

        // default col def properties get applied to all columns
        defaultColDef: {
            flex: 1,
            minWidth: 100,
            // allow every column to be aggregated
            enableValue: true,
            // allow every column to be grouped
            enableRowGroup: true,
            // allow every column to be pivoted
            enablePivot: true,
            sortable: true,
            filter: true,
            resizable: true

        },
        //width: 700,
        sideBar: true,
        rowSelection: 'multiple', // allow rows to be selected
        animateRows: true, // have rows animate to new positions when sorted

        // example event handler
        onCellClicked: params => {
            console.log('cell was clicked', params)
        }
    };
    return gridOptions;
}