Error when create the production build using tree grid: Object prototype may only be an Object or null: undefined

[GUU]

Hi,

I've been trying to use the TreeGrid component. While developing and running it when npm run start it works as expected, but when running it from the production version (npm run build) the packed version will throw this error:

header-cell-renderer.js:6 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at e (header-cell-renderer.js:6:16)
    at header-cell-renderer.js:9:9
    at header-cell-renderer.js:27:5
    at Object.<anonymous> (header-cell-renderer.js:26:41)
    at l (attendance-report.htm:1:1195)
    at Object.<anonymous> (print.js:1:1)
    at l (attendance-report.htm:1:1195)
    at Object.<anonymous> (util.js:1:1)
    at l (attendance-report.htm:1:1195)

Upon further inspection, I can see that this happens in the following part of the Syncfusion's library:

These are the versions we are using:

    "@syncfusion/ej2-react-buttons": "^19.4.55",  

    "@syncfusion/ej2-react-calendars": "^19.4.56",  

    "@syncfusion/ej2-react-charts": "^19.4.54",

    "@syncfusion/ej2-react-dropdowns": "^19.4.56",  

    "@syncfusion/ej2-react-heatmap": "^19.4.52",  

    "@syncfusion/ej2-react-inputs": "^19.4.52",

    "@syncfusion/ej2-react-pivotview": "^19.4.55",  

    "@syncfusion/ej2-react-querybuilder": "^19.4.56",

    "@syncfusion/ej2-react-richtexteditor": "^19.4.56",

    "@syncfusion/ej2-react-treegrid": "^19.4.56",

and the react version is as follows:

 "react-scripts": "^4.0.0"

"react": "^17.0.0",

 "react-dom": "^17.0.0",

we are also using material-ui as the style library, with the following versions:

"@material-ui/core": "^4.11.3",

    "@material-ui/icons": "^4.11.2",

    "@material-ui/lab": "^4.0.0-alpha.61",

    "@material-ui/styles": "^4.11.3",

The code is implemented as:

import { ColumnDirective, ColumnMenu, ColumnsDirective, ExcelExport, Filter, Inject,

    PdfExport, Sort, Toolbar, TreeGridComponent, VirtualScroll } from '@syncfusion/ej2-react-treegrid';

import { Grid as MuiGrid} from '@material-ui/core'

...

<MuiGrid container spacing={1}>

                        <MuiGrid item xs={12}>

                            <TreeGridComponent

                                ref={g => (this.grid = g)}

                                dataSource={AGGR_DATA}

                                treeColumnIndex={1}

                                childMapping={true}

                                allowFiltering={true}

                                filterSettings={{type: 'Menu', hierarchyMode: 'Parent'}}

                                allowSorting={true}

                                enableVirtualization={true}

                                enableCollapseAll={true}

                                allowPdfExport={true}

                                allowExcelExport={true}

                                showColumnChooser={true}

                                showColumnMenu={true}

                                toolbar={['PdfExport', 'ExcelExport']}

                                toolbarClick={this.toolbarClick}

                                expanded={this.rowExpanded}

                                collapsed={this.rowCollapsed}

                                rowSelected={this.rowSelected}

                                rowDeselected={this.rowSelected}

                                selectionSettings={{type: 'Multiple'}}

                                height={400}

                                allowTextWrap={true}

                                allowResizeToFit={true}

                            >

                                <ColumnsDirective>

                                    {this.state.columns &&

                                        this.state.columns.map(col => {

                                            return (

                                                <ColumnDirective

                                                    key={col.id}

                                                    field={col.id}

                                                    headerText={col.label}

                                                    visible={col.visible}

                                                    type={col.type}

                                                    isPrimaryKey={col.isPrimaryKey}

                                                />

                                            )

                                        })}

                                </ColumnsDirective>

                                <Inject

                                    services={[

                                        Filter,

                                        Sort,

                                        VirtualScroll,

                                        Toolbar,

                                        PdfExport,

                                        ExcelExport,

                                        ColumnMenu,

                                    ]}

                                />

                            </TreeGridComponent>

                        </MuiGrid>

                    </MuiGrid>

Do you know, or heard about any compatibility issues with TreeGrid?

Thank you very much for your help.

[Farveen Sulthana Thameeztheen Basha]

Hi Gonzalo,

Greetings from Syncfusion Support.

The reported problem is already known Issue in the mentioned version. To overcome this problem, we suggest you to upgrade into our latest version 20.3.57 or minimal of 20.1.48 to resolve the problem. Please get back to us if you need any further assistance.

Regards,

Farveen sulthana T