Gantt grid DnD error when dragging rows

Hello, dear DHTMLX users and support team!

I have the following issue with DHTMLX Gantt when dragging Gantt Grid rows and cannot resolve it:

Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')
    at Object.n [as getNodePosition] (dhtmlxgantt.js:12:2233)
    at v (dhtmlxgantt.js:19:195236)
n @ dhtmlxgantt.js:12
v @ dhtmlxgantt.js:19
setInterval (async)
eval @ dhtmlxgantt.js:19
setTimeout (async)
_ @ dhtmlxgantt.js:19
g @ dhtmlxgantt.js:19
p @ dhtmlxgantt.js:19

This is somewhere there (part of running compiled code):

 , function(t, e) {
        function n(t) {
            var e = 0
              , n = 0
              , i = 0
              , r = 0;
            if (t.getBoundingClientRect) {
                var a = t.getBoundingClientRect()
                  , o = document.body
                  , s = document.documentElement || document.body.parentNode || document.body
                  , l = window.pageYOffset || s.scrollTop || o.scrollTop
                  , c = window.pageXOffset || s.scrollLeft || o.scrollLeft
                  , u = s.clientTop || o.clientTop || 0
                  , d = s.clientLeft || o.clientLeft || 0;
                e = + l - u,
                n = a.left + c - d,
                i = document.body.offsetWidth - a.right,
                r = document.body.offsetHeight - a.bottom
            } else {

DnD is working unstable and sluggish, but time to timt finally I can see tasks in their new places. Console is filled with this error while dragging (and repeated notification caused by this error captures by the React beautiful DnD).

More details.

  1. My Gantt chart is rendered inside the React component
import {Gantt} from "scripts/dhtmlx-gantt";
import 'scripts/dhtmlx-gantt/codebase/dhtmlxgantt.css';

(/scripts here is the folder in our project tree where we place non-npm dependencies.)

this.ganttChart = Gantt.getGanttInstance();
const ganttChart = this.ganttChart;
                ganttChart.config.order_branch = true;
		ganttChart.config.order_branch_free = true;
		ganttChart.config.open_tree_initially = true;
		ganttChart.config.show_unscheduled = false;
		ganttChart.config.round_dnd_dates = false;
		ganttChart.config.time_step = 1;
		ganttChart.config.duration_unit = 'day';
		ganttChart.config.duration_step = 1;
		ganttChart.config.fit_tasks = true;
  1. Gantt container is supplied by the fixed height style and overflow-y: auto (as those are requirements of the React beautiful DnD). Position of the wrapping DIV element is relative, display is block.
return (
				<div className="wrapper gantt-wrapper" id={"gantt-wrapper-" + this.key}
					ref={(input) => { this.ganttContainer = input }}>
  1. I use the Grid only, but I have the same problem in the other place where I have Grid+Timeline.
  2. My version is Version 8.0.1, Professional Edition (company has Pro suite)
  3. We also use React beautiful DnD in this project in our separate components (other than this component with Gantt - no other DnD blocks here).
"react": "17.0.2",
"react-beautiful-dnd": "^10.1.1",
"react-bootstrap": "0.32.1",

Can you help me with diagnostics and fixing that problem?
Feel free asking me for providing any further details.


I used your configuration, but unfortunately I can’t reproduce the issue. Could you send a test app so I can investigate further?

Sorry for delay.
I will try to make a sandbox with that. I’ll try to repeat markup and styles - it is not so simple