Cannot read properties of undefined (gantt.config) after building react app

Gantt
#1

Hi. I’m using vite, and react+ts.

I’m able to develop just fine, and also build without errors.

But, after opening a page using dhtmlx-gantt, I get this error:

TypeError: Cannot read properties of undefined (reading ‘config’)

Here’s my package.json entry:

"dhtmlx-gantt": "file:gantt_8.0.9_startup",

Here’s my vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ["dhtmlx-gantt"],
  },
});

Here’s my tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "gantt_8.0.9_startup"],
  "exclude": ["tests"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

And finally here’s how I’m using it in my code:

import * as dhtmlxGantt from "dhtmlx-gantt";
const { gantt } = dhtmlxGantt;

type GanttTask = dhtmlxGantt.Task & {
  serverTask: ScheduleTaskDTO;
};

// then, I'm using it like 
gantt.config.xxx = yyyy

Can you please help me?

#2

Hello,
I tried to reproduce the issue in the following demo by adding your configuration:
https://files.dhtmlx.com/30d/1097dd142e588075ac79d1f07afbdfc5/react+tsx+GanttInstance+vite.zip

But it seems that Gantt works correctly there.
It is hard to suggest what might be wrong in your case, please send me a ready demo with all the necessary files so that I can reproduce the issue locally.

1 Like
#3

Hey Ramil, thanks so much!

Actually your code helped me fix the issue on my end -

The issue is that my vite.config.ts was missing the “build” options that are present in your demo.

After I updated my vite.config.ts to this:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ["dhtmlx-gantt/*"],
  },
  // below is what you had in your config that I was missing
  build: {
    commonjsOptions: {
      include: [/node_modules/, "gantt_8.0.9_startup/codebase/dhtmlxgantt.js"],
    },
  },
});

I no longer get the issue!

So thankful for your reply - really appreciate your help!

1 Like