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: https://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 by omerkati »

This is weird since I reinstalled everything and it still works. I have updated the git, maybe you can try that and if that does not work please try to install the date-fns module manually it seems to be related to one of the components I use.

https://github.com/date-fns/date-fns/issues/1948


Post by omerkati »

I have tested it and the application fails to load once I import the configs for the histogram and gantt.

Is there anything that should be changed in the AppConfig file?


Post by alex.l »

I downloaded sources from your github repo today. I see these errors in console. (not browser console, but where I started npm)

mflix-main % npm run dev

dev
next dev

ready - started server on 0.0.0.0:3000, url: https://localhost:3000
event - compiled client and server successfully in 5.5s (535 modules)
wait - compiling...
event - compiled client and server successfully in 135 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

These errors don't seem to be related with our components. Could you please investigate it and check if you can simply remove all unrelated code/imports and check if it works well with our components only?

All the best,
Alex


Post Reply