The error “reactivity.esm-bundler.js:432 Uncaught RangeError: Maximum call stack size exceeded” is occurring when using dhtmlxGantt v8.0.6 (Professional Evaluation) Version with Vue 3 (v3.3.4) and Vite 4 (v4.4.9).
The issue occurs, causing the “Resource Management” related UI to not function correctly.
The error message:
The error is happening when using the “Resource Management” related functionality.
I am using the official demo code provided by dhtmlx and adapting it for use with Vue 3.
demo url: Gantt : Samples
When I add the configuration for the “resources” section in the layout:
Layout Configuration:
gantt.config.layout = {
css: 'gantt_container',
rows: [
....
{
gravity: 1,
id: 'resources',
config: resourceConfig,
templates: resourceTemplates,
cols: [
{ view: 'resourceGrid', group: 'grids', scrollY: 'resourceVScroll' },
{ resizer: true, width: 1 },
{ view: 'resourceHistogram', capacity: 24, scrollX: 'scrollHor', scrollY: 'resourceVScroll' },
{ view: 'scrollbar', id: 'resourceVScroll', group: 'vertical' },
],
},
{ view: 'scrollbar', id: 'scrollHor' },
],
}
- The error doesn’t occur when initializing Gantt without any data.
gantt.parse([])
- The error also doesn’t occur when initializing Gantt with data, but the data doesn’t include any tasks of type “task.”
gantt.parse([
{ "id": 1, "text": "Office itinerancy", "type": "project", "start_date": "02-04-2019 00:00", "duration": 17, "progress": 0.4, "owner": [{"resource_id":"5", "value": 3}], "parent": 0}
])
3. The error occurs when initializing Gantt with data that includes tasks of type “task.”
gantt.parse([
{ "id": 1, "text": "Office itinerancy", "type": "project", "start_date": "02-04-2019 00:00", "duration": 17, "progress": 0.4, "owner": [{"resource_id":"5", "value": 3}], "parent": 0},
{ "id": 6, "text": "Air conditioners check", "type": "task", "start_date": "03-04-2019 00:00", "duration": 7, "parent": "2", "progress": 0.6, "owner": [{"resource_id":"7", "value": 1}], "priority":2},
])
4. The error also occurs when initializing the following data segment.
gantt.$resourcesStore.parse([
{ id: 1, text: 'QA', parent: null },
{ id: 2, text: 'Development', parent: null },
{ id: 3, text: 'Sales', parent: null },
{ id: 4, text: 'Other', parent: null },
{ id: 5, text: 'Unassigned', parent: 4, default: true },
{ id: 6, text: 'John', parent: 1 },
{ id: 7, text: 'Mike', parent: 2 },
{ id: 8, text: 'Anna', parent: 2 },
{ id: 9, text: 'Bill', parent: 3 },
{ id: 10, text: 'Floe', parent: 3 },
])