this.cellComp is undefined in CellCtrl.createCellRendererParams with AgGridReact

[adamreeve]

I'm submitting a ... (check one with "x")

[x] bug report => see 'Providing a Reproducible Scenario'
[] feature request => do not use Github for feature requests, see 'Customers of AG Grid'
[] support request => see 'Requesting Community Support'

I've been working on upgrading the version of ag-grid used by the open source mlflow project from 25.3.0 to 27.1.0, and trying to improve performance when reloading data or loading more data by implementing the getRowId method.

However, I'm getting errors when updating the row data within ag-grid in CellCtrl.createCellRendererParams because this.cellComp is undefined. The full stack trace is:

TypeError: Cannot read properties of undefined (reading 'getParentOfValue')
	at CellCtrl.createCellRendererParams (cellCtrl.js:470:1)
	at CellCtrl.showValue (cellCtrl.js:215:1)
	at CellCtrl.refreshCell (cellCtrl.js:564:1)
	at rowCtrl.js:502:1
	at Array.forEach (<anonymous>)
	at RowCtrl.onRowNodeDataChanged (rowCtrl.js:501:1)
	at eventService.js:104:1
	at Set.forEach (<anonymous>)
	at processEventListeners (eventService.js:99:1)
	at EventService.dispatchToListeners (eventService.js:109:1) "Uncaught TypeError: Cannot read properties of undefined (reading 'getParentOfValue')"

I've tried to reproduce this with a minimal example but without any luck. And the error isn't consistently reproducible but will happen randomly, so possibly there's a race condition somewhere. The full code I'm using can be seen at https://github.com/adamreeve/mlflow/blob/d9adb6a9c7574c97b194dc193ebb8bc1a2f2fb4b/mlflow/server/js/src/experiment-tracking/components/ExperimentRunsTableMultiColumnView2.js

Does this look like I'm doing something wrong or is this a bug within ag-grid?

I can see comments elsewhere in CellCtrl stating that cellComp may not be set yet due to async in React (

ag-grid/community-modules/core/src/ts/rendering/cell/cellCtrl.ts

Lines 648 to 649 in 6647b6a

	// because of async in React, the cellComp may not be set yet, if no cellComp then we are
	// yet to initialise the cell, so no need to refresh.

), so I think the correct fix might be to just exit out of CellCtrl.refreshCell if this.cellComp is not set. (Exiting early in createCellRendererParams or showValue isn't enough as then the same error is raised in applyUserStyles). This isn't an area I'm very familiar with but I'm happy to open a PR with that change if you'd like.

Current behavior Cannot read properties of undefined error when updating row data.

Expected behavior Not crashing.

Please tell us about your environment:

Fedora Linux 35, using a React app based on craco.

• AG Grid version: 27.1.0

• Browser: Chrome 100 (Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36)

• Language: ES5

[YassineElbouchaibi]

Having the same issue after upgrading to AG Grid v27. No specific pattern on my end as well, seems sporadic.

Here is a stack trace:

Uncaught TypeError: Cannot read properties of undefined (reading 'getParentOfValue')
    at CellCtrl.createCellRendererParams (static/js/vendors~main.chunk.js:41589:37)
    at CellCtrl.showValue (static/js/vendors~main.chunk.js:41254:23)
    at CellCtrl.refreshCell (static/js/vendors~main.chunk.js:41699:12)
    at static/js/vendors~main.chunk.js:48589:23
    at Array.forEach (<anonymous>)
    at RowCtrl.onRowNodeDataChanged (static/js/vendors~main.chunk.js:48588:28)
    at static/js/vendors~main.chunk.js:14594:11
    at Set.forEach (<anonymous>)
    at processEventListeners (static/js/vendors~main.chunk.js:14588:24)
    at EventService.dispatchToListeners (static/js/vendors~main.chunk.js:14602:7)
    at EventService.dispatchEvent (static/js/vendors~main.chunk.js:14572:10)
    at RowNode.dispatchLocalEvent (static/js/vendors~main.chunk.js:13066:25)
    at RowNode.setDataCommon (static/js/vendors~main.chunk.js:12624:10)
    at RowNode.updateData (static/js/vendors~main.chunk.js:12614:10)
    at static/js/vendors~BlotterGrid~GripApp.chunk.js:266:15
    at Array.forEach (<anonymous>)
    at ClientSideNodeManager.executeUpdate (static/js/vendors~BlotterGrid~GripApp.chunk.js:259:12)
    at ClientSideNodeManager.updateRowData (static/js/vendors~BlotterGrid~GripApp.chunk.js:137:10)
    at ClientSideRowModel.updateRowData (static/js/vendors~BlotterGrid~GripApp.chunk.js:1310:40)
    at ImmutableService.setRowData (static/js/vendors~BlotterGrid~GripApp.chunk.js:1998:51)
    at GridApi.setRowData (static/js/vendors~main.chunk.js:20422:29)
    at static/js/vendors~main.chunk.js:7517:31
    at Array.forEach (<anonymous>)
    at Function.ComponentUtil.processOnChange (static/js/vendors~main.chunk.js:7513:33)
    at static/js/vendors~BlotterGrid~GripApp.chunk.js:3463:54
    at AgGridReactUi.processWhenReady (static/js/vendors~BlotterGrid~GripApp.chunk.js:3468:7)
    at AgGridReactUi.processChanges (static/js/vendors~BlotterGrid~GripApp.chunk.js:3463:10)
    at AgGridReactUi.processPropsChanges (static/js/vendors~BlotterGrid~GripApp.chunk.js:3394:10)
    at AgGridReactUi.componentDidUpdate (static/js/vendors~BlotterGrid~GripApp.chunk.js:3387:10)
    at commitLifeCycles (static/js/vendors~main.chunk.js:258749:28)
    at commitLayoutEffects (static/js/vendors~main.chunk.js:261457:11)
    at HTMLUnknownElement.callCallback (static/js/vendors~main.chunk.js:242133:18)
    at HTMLUnknownElement.sentryWrapped (static/js/vendors~main.chunk.js:128537:17)
    at Object.invokeGuardedCallbackDev (static/js/vendors~main.chunk.js:242182:20)
    at invokeGuardedCallback (static/js/vendors~main.chunk.js:242242:35)
    at commitRootImpl (static/js/vendors~main.chunk.js:261191:13)
    at unstable_runWithPriority (static/js/vendors~main.chunk.js:284635:16)
    at runWithPriority$1 (static/js/vendors~main.chunk.js:249539:14)
    at commitRoot (static/js/vendors~main.chunk.js:261034:7)
    at performSyncWorkOnRoot (static/js/vendors~main.chunk.js:260376:7)
    at static/js/vendors~main.chunk.js:249593:30
    at unstable_runWithPriority (static/js/vendors~main.chunk.js:284635:16)
    at runWithPriority$1 (static/js/vendors~main.chunk.js:249539:14)
    at flushSyncCallbackQueueImpl (static/js/vendors~main.chunk.js:249588:13)
    at flushSyncCallbackQueue (static/js/vendors~main.chunk.js:249576:7)
    at scheduleUpdateOnFiber (static/js/vendors~main.chunk.js:259940:13)
    at dispatchAction (static/js/vendors~main.chunk.js:254309:9)
    at Object.setCellCtrls (static/js/vendors~BlotterGrid~GripApp.chunk.js:5692:29)
    at static/js/vendors~main.chunk.js:48445:20
    at Array.forEach (<anonymous>)

[adamreeve]

I've now managed to come up with a reasonably simple example that reliably reproduces the error. I've modified the RichGridDeclarativeExample in a fork of the examples repository, you can see my changes in adamreeve/ag-grid-react-example@2f88de8.

I think the conditions needed to trigger this are creating new rows and then mutating their data soon after they are created. I've modified the example so that the Refresh button will add new rows to the existing data and then modify the row data for the skills cells so that they need to be redrawn. Making many state changes in succession seems to be needed to reliably reproduce the error although that doesn't really match what my real code is doing.

[ghmeier]

I've also experienced this issue after upgrading to ag-grid v27. I could work around the issue by avoiding calling setRowGroupColumns with an empty array, but it seems like something about the order of initialization was causing undefined this.cellComp in refreshCell

[StephenCooper]

Could you please confirm if this is still an issue with version 27.2 that was released today.

[ghmeier]

Looks like it's impossible to install ag-grid-react with other ag-grid packages on 27.2.0 because of this: #5104

[adamreeve]

Hi @StephenCooper, I can confirm this appears to be fixed in 27.2 and I can no longer reproduce the crash with my example. Looks like this was fixed by 516e500.

(When installing with yarn I get a warning " > @ag-grid-community/react@27.2.0" has incorrect peer dependency "@ag-grid-community/core@~27.1.0" but the install still succeeds)

[StephenCooper]

Thanks for validating the fix.

We will be releasing a patch for the peer dependency issue later today, thanks for the quick feedback on that one.

[StephenCooper]

27.2.1 has now been released which fixes the peer dependency issue.

[YagneshDev]

Hi everyone
I'm still facing the same issue after upgrading to 27.2.1 which is errors when updating the row data within ag-grid in CellCtrl.createCellRendererParams because this.cellComp is undefined.

Flow:
-> Initially grid is loaded with no filters and in pivot mode
-> Changing the grid by clicking button which uses applyColumnState , setFilterModel and setPivotMode for updating columnState , filters and pivotMode respectively which throws the error

Uncaught TypeError: Cannot read properties of undefined (reading 'getParentOfValue')

at CellCtrl.createCellRendererParams (ag-grid-community.cjs.js?7fb8:21902:1)
at CellCtrl.showValue (ag-grid-community.cjs.js?7fb8:21680:1)
at CellCtrl.refreshCell (ag-grid-community.cjs.js?7fb8:21991:1)
at CellCtrl.onCellChanged (ag-grid-community.cjs.js?7fb8:21960:1)
at eval (ag-grid-community.cjs.js?7fb8:22912:66)
at Array.forEach (<anonymous>)
at eval (ag-grid-community.cjs.js?7fb8:22912:1)
at eval (ag-grid-community.cjs.js?7fb8:1350:1)
at Set.forEach (<anonymous>)
at processEventListeners (ag-grid-community.cjs.js?7fb8:1345:59)

[Neorama]

Hi everyone, I am facing similar issue in "ag-grid-react": "27.3.0". Unable to reproduce locally but in deployed application it is crashing consistently.
scenario : when you try to tab from cellEditor in the last column to the cellEditor in the first column of the next row.

The error
ag-grid-community.cjs.js:23840 Uncaught TypeError: Cannot read properties of undefined (reading 'addOrRemoveCssClass')
at t.setInlineEditingClass (ag-grid-community.cjs.js:23840:23)
at t.setEditing (ag-grid-community.cjs.js:23717:14)
at t.startEditing (ag-grid-community.cjs.js:23705:14)
at t.moveToNextEditingCell (ag-grid-community.cjs.js:27458:18)
at t.tabToNextCellCommon (ag-grid-community.cjs.js:27434:28)
at t.tabToNextCell (ag-grid-community.cjs.js:27415:21)
at e.tabToNextCell (ag-grid-community.cjs.js:30970:39)
at l.finishCell (AgGridManager.ts:289:31)
at c.blurHandler (AgGridManager.ts:330:14)

While debugging I found that this.cellComp is undefined in CellCtrl.prototype.setInlineEditingClass and this line causes the error this.cellComp.addOrRemoveCssClass(CSS_CELL_INLINE_EDITING, editingInline); .

[caitlinwolters-RL]

For what it's worth: we frequently see this issue in our production code (between 5 - 10 times in the last year in different places) and it seems like it's associated with rapidly updating filters / page sizes / sorts on a grid.

We're currently locked into using v27.0.0.