TypeError: Cannot read properties of undefined (reading 'add') When load from API

[PanuwatChinpratan]

I don't understand what property ('add') is.

Error

TypeError: Cannot read properties of undefined (reading 'add')
    at o.addComponent (grapesjs:2:574255)
    at o.setComponents (grapesjs:2:574605)
    at o.setComponents (grapesjs:2:950142)
    at t.setComponents (grapesjs:2:964646)
    at o.fetchAndRender (main.html:2619:31)
    at o.handleEndpointChange (main.html:2615:30)
    at o.init (main.html:2609:30)
    at o.initialize (grapesjs:2:481510)
    at e.Model (grapesjs:2:10460)
    at o.e [as constructor] (grapesjs:2:312629)

My Code

            editor.DomComponents.addType('api-content-05', {
                model: {
                    defaults: {
                        traits: [
                            {
                                type: 'edit-endpoint',
                                name: 'editendpoint',
                                label: 'Edit Endpoint',
                            },
                            {
                                type: 'endpoint-trait',
                                name: 'endpoint',
                                label: 'Endpoint',
                            },

                            {
                                type: 'map-title',
                                name: 'mapTitle',
                                label: 'Title',
                            },
                            {
                                type: 'map-body',
                                name: 'mapBody',
                                label: 'Body',
                            },
                            {
                                type: 'filter-index',
                                name: 'filterIndex',
                                label: 'Filter',
                            },
                        ],
                        endpoint: '',
                        title: '',
                        body: '',
                        script: function () {
                            let calendarEl = document.getElementById('calendar');
                            let calendar = new FullCalendar.Calendar(calendarEl, {
                                headerToolbar: {
                                    left: 'addEventButton',
                                    center: 'title',
                                    right: '',
                                },

                                customButtons: {
                                    addEventButton: {
                                        text: 'Add event',
                                        click: function () {
                                            let dateStr = prompt(
                                                'Enter a date in YYYY-MM-DD format'
                                            );
                                            let date = new Date(dateStr + 'T00:00:00'); // will be in local time

                                            if (!isNaN(date.valueOf())) {
                                                // valid?
                                                calendar.addEvent({
                                                    title: prompt('Enter event title'),
                                                    start: date,
                                                    allDay: true,
                                                });
                                                alert('Great. Now, update your database...');
                                            } else {
                                                alert('Invalid date.');
                                            }
                                        },
                                    },
                                },
                                dateClick: async function (info) {
                                    let titlePrompt = await prompt('Event Title:');
                                    if (titlePrompt) {
                                        calendar.addEvent({
                                            title: titlePrompt,
                                            start: info.date,
                                            allDay: true,
                                        });

                                        console.log('titlePrompt', titlePrompt);
                                    }
                                },

                                eventClick: function (info) {
                                    window.parent.postMessage(
                                        { type: 'openModal', title: info.event.title },
                                        '*'
                                    );

                                    // ใน iframe
                                    window.addEventListener('message', function (event) {
                                        let messageType = event.data.type;

                                        if (messageType === 'Delcalendar') {
                                            info.event.remove();
                                        } else if (messageType === 'EditCalendar') {
                                            let newTitle = prompt(
                                                'Edit Event Title:',
                                                info.event.title
                                            );
                                            if (newTitle !== null) {
                                                info.event.setProp('title', newTitle);
                                            }
                                        }
                                    });
                                },
                            });
                            calendar.render();
                        },
                    },

                    init() {
                        [
                            'change:endpoint',
                            'change:title',
                            'change:body',
                            'change:filterIndex',
                            'change:editendpoint',
                        ].forEach((eventType) => {
                            this.listenTo(this, eventType, this.handleEndpointChange);
                            // console.log(this.handleEndpointChange);
                        });

                        this.handleEndpointChange();
                    },

                    handleEndpointChange() {
                        const { endpoint, title, body, filterIndex, editendpoint } =
                            this.attributes;
                        this.fetchAndRender(endpoint, title, body, filterIndex, editendpoint);
                    },
                    fetchAndRender() {
                        const content = `<div id='calendar'></div>`;
                        editor.setComponents(content);
                    },
                },
            });

Load

const loadButton = $('<button>')
                                    .text('Load')
                                    .addClass('btn btn-success btn-sm ml-2')
                                    .click(async function () {
                                        try {
                                            const response = await axios.get(
                                                'http://127.0.0.1:3000/api/items/' + project._id
                                            );
                                            const data = await response.data.data;
                                            console.log('LoadFetch:Data =', data);

                                            editor.loadProjectData(data);
                                        } catch (error) {
                                            console.error(error);
                                        }
                                    });