I've been working on an integration with Bryntum Gantt for a few months now. I have tasks, children, dependencies, I've customized several aspects of the Gantt chart, etc. and have had nearly no issues on 6.1.7. Unfortunately, even the most basic setup has an issue on version 6.1.8 and above. I even checked 6.3.2 this morning and it's still an issue.
The behavior I noticed is that the first task always has a strikethrough and its Completion Percent is NaN. If I use more data, there are weird scrolling issues, like the ability to scroll down as if there were 5000 rows, but it's all blank. When you scroll back up, the first row is just totally blank. It seems clear that some JavaScript errors are causing all kinds of odd behavior.
I've tried troubleshooting this, I've put the component on multiple pages, I've changed Salesforce settings like enabling/disabling different LWC security settings, and nothing has helped. When I open the Chrome developer tools and pause on caught expections, I get the exception (second screenshot) of "TypeError: e.getTime is not a function". I am using the "gantt.lwc.module.min.js" file, to be clear.
Any ideas on what's going on here? I can provide more information if need be. Please see below for my basic example that works perfectly on 6.1.7 and not for any newer version.
<template>
<div class="host" style="height: 600px;" lwc:dom="manual"></div>
</template>/* globals bryntum */
import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import GANTT from '@salesforce/resourceUrl/bryntum_gantt_632';
export default class ProductionGantt extends LightningElement {
gantt;
_loaded = false;
async renderedCallback() {
if (this._loaded) {
return;
}
this._loaded = true;
try {
await Promise.all([
loadScript(this, `${GANTT}/gantt.lwc.module.min.js`),
loadStyle(this, `${GANTT}/gantt.stockholm.min.css`)
]);
// wait for visible container (tab timing)
const el = this.template.querySelector('.host');
const project = new bryntum.gantt.ProjectModel({
tasks: [
{ id: 1, name: 'Project', expanded: true, children: [
{ id: 11, name: 'Task A', startDate: new Date('2025-08-12T14:15:00Z'), endDate: new Date('2025-08-14T16:15:00Z'), percentDone: 46 },
{ id: 12, name: 'Task B', startDate: new Date('2025-08-19T14:15:00Z'), endDate: new Date('2025-08-21T16:15:00Z'), percentDone: 46 }
]}
],
dependencies: [{ id: 'd1', from: 11, to: 12, type: 2 }]
});
this.gantt = new bryntum.gantt.Gantt({
project,
appendTo: el,
columns: [{ type: 'name', width: 300 }, { type: 'percentdone' }],
startDate: new Date('2025-08-01')
});
} catch (e) {
// eslint-disable-next-line no-console
console.error('Smoke test boot error', e);
}
}
}