[REACT]

[galb@control.site]

Hi there,

We're currently working on loading new Gantt data following a fetch from the server. Here's our approach: we place the response data into the Redux store. Then, within a useEffect hook, we listen for changes in the store and update a useState variable with this data, subsequently passing it to the Gantt component.

const currentGantt = useSelector(selectCurrentGantt);
const [ganttData, setGanttData] = useState<any>({});

useEffect(() => {
  setGanttData(currentGantt);
}, [currentGantt]);

However, we're encountering an error:

Unhandled Runtime Error
TypeError: Cannot add property fromEvent, object is not extensible

This error arises from the following source:
app/components/schedules/gantt/gantt.component.tsx (47:48) @ loadCrudManagerData

Here's where the issue occurs:

const initGantt = async () => {
  await ganttRef.current.instance.crudManager.loadCrudManagerData(ganttData);
}

We've also attached the JSON response data for your reference.

Thank you in advance for any assistance you can provide.

[mats]

Please provide a runnable test case so we can see what your code is doing.

[galb@control.site]

Thank you for your prompt response.

Attached, please find the "runnable-test" zip file.

Best regards,

[alex.l]

Hi,

Thanks for the test case!
I've spent some time to investigate the reason, but didn't find anything obvious, so I opened a ticket to fix that https://github.com/bryntum/support/issues/8889
You can subscribe on ticket updates to be notified when it's done.

[galb@control.site]

Thanks Alex.
we've noticed that the bug has been opened and that you're actively working on a fix. Given that this issue is affecting our production, could you provide an estimated timeline for when the fix will be implemented? We need to prioritize this as soon as possible. Thank you.

[alex.l]

Hi,

We marked a ticket as high-prio, so it shouldn't take a lot of time to fix, but I can't provide any terms unfortunately. Usually it don't take more than 1-3 weeks, but still, we can't guarantee. Try to use https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#function-loadInlineData meanwhile. It will require some change in data structure, but nothing else.
I would also recommend you to use fromEvent/toEvent notation in your models and remove fromTask/toTask, and do not use both. It might also help you to avoid this bug until the fix is there.

[galb@control.site]

Hi,
we tried to update the loading process to inline data function (as you suggested)
but it still doesn't work.
attaching new runnable-rest zip file that also include that try.

Best regards,

[alex.l]

Hi,

Thanks for the info, looks like my idea with a workaround was not succeed. We have to wait for the fix, I am afraid. I will ask my colleague to have a look at the next working day if he will have quick insights to unblock you.

[saki]

Hello Galb.

The problem here is that the data is made immutable somewhere in the chain between data.ts and loadCrudManagerData call. Normally, redux reducers should always make copies (which should resolve the issue). I have tried to modify your gantt selector to read:

import { createSelector } from "@reduxjs/toolkit";
import { IGanttState } from "./gantt.reducer";
import { RootState } from "./store";

const selectGanttState = (state: RootState) => {
  return JSON.parse(JSON.stringify(state.gantt));
};

export const selectCurrentGantt = createSelector(
  selectGanttState,
  (ganttState: IGanttState) => ganttState.currentGantt
);

which fixes the issue.

Nevertheless, Gantt (and its models) should handle immutable data correctly, therefore I have created ticket https://github.com/bryntum/support/issues/8973 which, when fixed, will automatically fix the original ticket above.

Also, I'd suggest to make reducers to always make copies of data (which can be tricky in the case of deep objects).

[galb@control.site]

Hi,
thank you it's working!