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


#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


#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 )