Hi,
I've had this bug for a couple weeks and after trying to pinpoint the origin, I'm almost certain this is the reason. I used the field inlineData on the ProjectModel to load my tasks but whenever the tasks have a startDate and endDate that are null (or undefined), I have an error when the project load. I also have errors when trying to TaskDragCreate and the component becomes unusable. Here's the error:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getTime')
at Function.max (gantt.umd.js:31584)
at Gantt.internalOnProjectRefresh (gantt.umd.js:127777)
at ProjectModel.trigger (gantt.umd.js:53953)
at EngineReplica.finalizeCommitAsync (gantt.umd.js:96556)
at EngineReplica.doCommitAsync (gantt.umd.js:1295)
at async ProjectModel.commitLoad (gantt.umd.js:102217)
at async ProjectModel.loadInlineData (gantt.umd.js:102211)
And here's my code, I modified the react/typescript/basic example although I don't think this is related to React but to the loadInlineData function.
// AppConfig.ts
/**
* Application configuration
*/
import { GanttConfig } from '@bryntum/gantt/gantt.umd.js';
const ganttConfig: Partial<GanttConfig> = {
columns: [{ type: 'name', field: 'name', width: 250 }],
viewPreset: 'weekAndDayLetter',
barMargin: 10
};
export { ganttConfig };
// App.tsx
/**
* Main Application script
*/
// Polyfills for Edge <= 18. Remove this line if you don't need support for it.
import 'core-js/stable';
import React, { Fragment, FunctionComponent, useEffect, useRef } from 'react';
import { BryntumDemoHeader, BryntumThemeCombo, BryntumGantt } from '@bryntum/gantt-react';
import { ganttConfig } from './AppConfig';
import './App.scss';
import { Gantt, ProjectModel } from '@bryntum/gantt/gantt.umd.js';
export const projectModel = new ProjectModel({
// This config enables responses validation and dumping of found errors to the browser console.
// It's meant to be used as a development stage helper only so please set it to false for production systems.
validateResponse: true,
});
const App: FunctionComponent = () => {
const ganttRef = useRef<{ instance: Gantt }>();
useEffect(() => {
projectModel.id = '9uow1wzae4knvnyv4c91y';
projectModel.startDate = '2021-10-01';
projectModel.endDate = '2021-10-15';
const eventsData2 = [{
id: 1,
name: 'Parent task 1',
startDate: null,
endDate: null,
children: [{
id: 2,
name: 'Child task 1',
startDate: null,
endDate: null,
}, {
id: 3,
name: 'Child task 2',
startDate: null,
endDate: null,
}, {
id: 4,
name: 'Child task 3',
startDate: null,
endDate: null,
}]
}]
const inlineData = {
eventsData: eventsData2,
};
projectModel.inlineData = inlineData;
});
return (
<Fragment>
<BryntumDemoHeader
title="React Basic demo with TypeScript"
href="../../../../../#example-frameworks-react-typescript-basic"
children={<BryntumThemeCombo />}
/>
<BryntumGantt {...ganttConfig} project={projectModel} ref={ganttRef} />
</Fragment>
);
};
export default App;