[REACT] Runtime error in BryntumGrid

[himanshurjoshi]

Hi,

I am getting runtime error while loading BryntumGrid
callback is not a function at DomSync.syncChildren

installed package details
"@bryntum/calendar-react-thin": "5.6.0-alpha-2",
"@bryntum/calendar-thin": "5.6.0-alpha-2",
"@bryntum/core-react-thin": "5.6.0-alpha-2",
"@bryntum/core-thin": "5.6.0-alpha-2",
"@bryntum/engine-thin": "5.6.0-alpha-2",
"@bryntum/grid-react-thin": "5.6.0-alpha-2",
"@bryntum/grid-thin": "5.6.0-alpha-2",
"@bryntum/scheduler-thin": "5.6.0-alpha-2",
"@bryntum/gantt-react-thin": "5.6.0-alpha-2",
"@bryntum/gantt-thin": "5.6.0-alpha-2",
"@bryntum/schedulerpro-thin": "5.6.0-alpha-2",

Error screen shot

Screenshot 2023-09-04 at 11.44.31 AM.png (526.8 KiB) Viewed 233 times

[mats]

How can we reproduce this? It would be great if you can provide a test case.

[Qwerty]

We're getting a similar backtrace on Gantt 5.5.3. It seems to happen when its trying to render a cell with a React component.

Uncaught (in promise) TypeError: callback is not a function
    at DomSync.syncChildren (gantt.module.js:33050:1)
    at DomSync.performSync (gantt.module.js:32724:1)
    at DomSync.sync (gantt.module.js:32696:1)
    at Row.renderCell (gantt.module.js:91628:1)
    at Row.render (gantt.module.js:91501:1)
    at RowManager.renderFromRow (gantt.module.js:92512:1)
    at RowManager.reinitialize (gantt.module.js:91970:1)
    at Gantt.resumeRefresh (gantt.module.js:188474:1)
    at Gantt.onCrudManagerApplyResponse (gantt.module.js:127529:1)
    at ProjectModel3.trigger (gantt.module.js:4985:1)

I tried to reproduce it in a React demo, but so far I couldn't figure out how to get any React components in the domConfig.children of DomSync.syncChildren.

In the documentation, it says DomSync.sync's callback is optional, but the code doesn't seem to handle it if there is no callback given for a React component.

[saki]

Hello Qwery and himanshurjoshi,

the error message is quite descriptive and it gives me a clue what might be happening. However, I really need a test-case that I can run, investigate and debug. Provide one please.

[Qwerty]

I have attached a project that causes the error.

I cut down our existing production code into this minimal example. I imagine we are doing some things wrong, like how we handle columns, so please advise if this is the case here.

[alex.l]

Hi,

In your case when I commented this line

// ganttEngine.columns.data = columnsData;

the error disappeared. columns is a store, try to use Store's API to add/remove columns.
Docs https://bryntum.com/products/gantt/docs/api/Grid/data/ColumnStore

Regarding to initial post, I can't say what's wrong in there without the code. Maybe something similar, maybe not.

[Qwerty]

Replacing that with the following seems to work for us, thanks!

ganttEngine.columns.removeAll();
ganttEngine.columns.add(columnsData);