How to implement @dhtmlx/trial-react-gantt with Next.js

Gantt
#1

How to implement @dhtmlx/trial-react-gantt with Next.js?
I have tried to implement Gantt chart with the given example in NEXT.js but It is giving below errors
— Each child in a list should have a unique “key” prop.
— Check the render method of i.

It would be appreciated if you provide a working example with create-next-app with typescript

#2

Hi,

Yep, the initial version doesn’t work correctly with SSR. We have just released the updated one ( “@dhtmlx/trial-react-gantt”:“1.0.3” ) which works correctly with NextJS.

So just update the package to the latest one.

Here is the online demo

1 Like
#3

Hi, using version "@dhtmlx/trial-react-gantt": "^1.1.0" Im getting ReferenceError: ResizeObserver is not defined. I can make it to work only with the following snippet:

if (typeof window !== "undefined") {
    return (
      <DefaultTheme>
        <Gantt scales={scales} columns={columns} tasks={tasks} links={links} />
      </DefaultTheme>
    );
  }
#4

Please update to version 1.1.1 where the issue is fixed.
( code uses ResizeObserver to switch between mobile and normal views, that detection can’t be done on the server side )

1 Like
#5

You can use the latest version of dhtmlx-scheduler. and set ssr to false by using dynamic from next/dynamic

const Scheduler = dynamic(() => import(“@/components/Molecules/Scheduler”), {
ssr: false,
});