t2 is not a function (willow)

fadialjawhary0

I am trying to build a Gantt chart, when i tested the code from the Documentation, it worked fine, when i tested the second code which has Willow in it, i started getting a console error saying "t2 is not a function".
I am using React version 19.1.0
Using Javascript not Typescript.

@svar-ui_react-gantt.js?v=205be3f6:10488 Uncaught TypeError: t2 is not a function
    at gn3 (@svar-ui_react-gantt.js?v=205be3f6:10488:70)
    at Object.react_stack_bottom_frame (react-dom_client.js?v=0feeffcb:18509:20)
    at renderWithHooks (react-dom_client.js?v=0feeffcb:5654:24)
    at updateFunctionComponent (react-dom_client.js?v=0feeffcb:7475:21)
    at beginWork (react-dom_client.js?v=0feeffcb:8525:20)
    at runWithFiberInDEV (react-dom_client.js?v=0feeffcb:997:72)
    at performUnitOfWork (react-dom_client.js?v=0feeffcb:12561:98)
    at workLoopSync (react-dom_client.js?v=0feeffcb:12424:43)
    at renderRootSync (react-dom_client.js?v=0feeffcb:12408:13)
    at performWorkOnRoot (react-dom_client.js?v=0feeffcb:11827:37)

 "@svar-ui/gantt-store": "^2.3.0",
    "@svar-ui/react-editor": "^2.3.1",
    "@svar-ui/react-gantt": "^2.3.1",
    "@svar-ui/react-grid": "^2.3.1",
    "@svar-ui/react-menu": "^2.3.1",

import { Gantt, Willow } from '@svar-ui/react-gantt';
import '@svar-ui/react-gantt/all.css';

const tasks = [
  {
    id: 20,
    text: 'New Task',
    start: new Date(2024, 5, 11),
    end: new Date(2024, 6, 12),
    duration: 1,
    progress: 2,
    type: 'task',
    lazy: false,
  },
  {
    id: 47,
    text: '[1] Master project',
    start: new Date(2024, 5, 12),
    end: new Date(2024, 7, 12),
    duration: 8,
    progress: 0,
    parent: 0,
    type: 'summary',
  },
  {
    id: 22,
    text: 'Task',
    start: new Date(2024, 7, 11),
    end: new Date(2024, 8, 12),
    duration: 8,
    progress: 0,
    parent: 47,
    type: 'task',
  },
  {
    id: 21,
    text: 'New Task 2',
    start: new Date(2024, 7, 10),
    end: new Date(2024, 8, 12),
    duration: 3,
    progress: 0,
    type: 'task',
    lazy: false,
  },
];

const links = [{ id: 1, source: 20, target: 21, type: 'e2e' }];

const scales = [
  { unit: 'month', step: 1, format: 'MMMM yyy' },
  { unit: 'day', step: 1, format: 'd' },
];

export default function App() {
  return (
    <Willow>
      <Gantt tasks={tasks} links={links} scales={scales} />
    </Willow>
  );
}

tasha

Hello fadialjawhary0,

The application of the theme is incorrectly described in our documentation, and we will fix this. Thank you for catching this discrepancy in the docs.

The correct way to apply the Willow theme is as follows:

Wrap your Gantt component and the <Willow /> component in a parent div (or another container element).
Add the theme class (wx-willow-theme for the light theme or wx-willow-dark-theme for the dark theme) to this container div.
Place the <Willow /> component as a direct child of this container, before the <Gantt /> component.

   <div className="wx-willow-theme">
      <Willow />
      <Gantt tasks={tasks} links={links} scales={scales} />
   </div>

Please check the example: https://stackblitz.com/edit/vitejs-vite-b7jvgwlg?file=src%2FGanttComponent.jsx,index.html&terminal=dev