I encounter an error when using the "Resource Management" functionality, resulting in a "Uncaught RangeError: Maximum call stack size exceeded" error

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' },
  1. The error doesn’t occur when initializing Gantt without any data.
  1. The error also doesn’t occur when initializing Gantt with data, but the data doesn’t include any tasks of type “task.”
  { "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.”

  { "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.

  { 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 },

Starting from the 8.0 version, you can load the resource data from the dataset with the tasks and links:

And there is a simpler configuration that tells Gantt to create the resource datastore:

Unfortunately, the histogram samples are not updated to use that configuration, but you can see that in the example of the resource load chart:

I added the configuration to the Vue 3 demos, and I couldn’t reproduce the issue:

Simpler gantt.config.resources:

Older approach (from the official samples):

If that doesn’t help you, it is hard to suggest what might be wrong as I don’t see your code. In that case, please send me a ready demo with all the necessary JavaScript and CSS files so that I can reproduce the issue locally.

@ramil Thank you for your reply!

I’ve found that the cause of the exception is the “fetchTasks” property in the “resource_store.” When I set the property value to “true,” an exception occurs, but when I set it to “false,” everything works fine.

In the code file attached, please refer to lines 428 or 440.

XGantt.vue (15.1 KB)

When I add your code to the snippet, it is working correctly:

I tried adding the fetchTasks config in the demo I sent to you, but I cannot reproduce the issue:

After I added the Typescript support, the issue is still not reproduced:

It is also working correctly in the demo with the older configuration approach:

However, maybe the issue in your case is that you add the Gantt configuration on the top levels of the script. This may not be a good idea. Because of that, if you switch to another tab, then back, the functions and event handlers will be added again, so the events will fire several times.

If you use Gantt in Vue or another framework related to node.js, it is expected to use the Gantt Instance approach.

When you open a page/tab/view with Gantt, you need to create a new Gantt instance. When you switch to a different page/tab/view, you need to destroy the Gantt instance:

Alternatively, you need to manually reset everything by yourself.
The following article covers the known issues:

You can check how it works in the demo applications I sent to you.

If that doesn’t help you, please send me a ready demo with all the necessary files so that I can reproduce the issue locally.