Our state of the art Gantt chart


Post by omerkati »

Dear bryntum team,

I am trying to get bryntum working with Next.js. I tried some of the techniques used in the other forums but I ran into the problem that the app is never able compile the website. It just keeps loading.

Could you provide an example of the resource-utilization function in next.js?

Thank you,
Ömer


Post by marcio »

Hey Ömer,

You need to add some code to work correctly with NextJS, as you'll see in the guides

https://bryntum.com/docs/gantt/guide/Gantt/integration/react/guide#loading-components-dynamically-with-nextjs

If the following didn't work out for you, please provide a project sample with your configuration, with that we could assist you better to figure out what you need.

The React components are just wrappers, all the configurations are still the same as the plain JS library.

Best regards,
Márcio


Post by omerkati »

Yes I tried that and now it just keeps loading, it does not even give an error. This is probably because I am using both the resource histogram and Gantt at the same time.

the code: https://github.com/omer-kati/mflix

Thank you in advance


Post by marcio »

Hey Ömer,

Checking your repo, it seems that the error is related to the useEffect hook, configuring as this worked correctly:

    useEffect(() => {
        if(histogramRef.current?.instance && ganttRef.current?.instance)
            histogramRef.current.instance.addPartner(ganttRef.current.instance);
    }, [histogramRef.current, ganttRef.current]);


useEffect(() => {
    if (dateRange.startDate && ganttRef.current?.instance) {
        ganttRef.current.instance.project.setStartDate(dateRange.startDate)
        ganttRef.current.instance.project.setEndDate(dateRange.endDate)
    }
}, [dateRange, ganttRef.current])

Also, there is a typo in startDate and endDate that are set like startData and startData.

Best regards,
Márcio


Post by omerkati »

Hey Marcio,

I made the changes and it still just keeps loading. Is there anything else you changed to make it work? Maybe you could send me your code so I can test it?

Also I get this Warning: data for page "/_error" (path "/") is 2 MB which exceeds the threshold of 128 kB, this amount of data can reduce performance.

Thank you,
Ömer


Post by saki »

Hello Ömer, I've downloaded zip of your repo and tried to run it and I get errors in the console that do not seem Bryntum related:

npm run dev

> dev
> next dev

warn  - Port 3000 is in use, trying 3001 instead.
ready - started server on 0.0.0.0:3001, url: http://localhost:3001
event - compiled client and server successfully in 743 ms (535 modules)
wait  - compiling...
event - compiled client and server successfully in 111 ms (535 modules)
wait  - compiling / (client and server)...
error - ./node_modules/react-date-range/dist/components/Calendar/index.js:28:0
Module not found: Can't resolve 'date-fns/max'

Import trace for requested module:
./node_modules/react-date-range/dist/index.js
./components/SideBar.jsx
./pages/index.js

https://nextjs.org/docs/messages/module-not-found
wait  - compiling /_error (client and server)...
error - ./node_modules/react-date-range/dist/components/Calendar/index.js:28:0
Module not found: Can't resolve 'date-fns/max'

Import trace for requested module:
./node_modules/react-date-range/dist/index.js
./components/SideBar.jsx
./pages/index.js

https://nextjs.org/docs/messages/module-not-found

Neither date-fns nor anything inside SideBar.jsx refers to a Bryntum component. What am I doing wrong/different?


Post Reply