next.js – How to properly implement toast-ui/calendar in nextjs

I am trying to implement @toast-ui/react-calendar, initially I was getting window is not defined but after implementing the fix I got here https://github.com/nhn/toast-ui.react-calendar/issues/39, I got this instead Unhandled Runtime Error Error: Element type is invalid: expected a string (for built -in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports. Check the render method of __WEBPACK_DEFAULT_EXPORT__.

This is my curent code

CalendarPage.js

import React from 'react';
import Calendar from '@toast-ui/react-calendar';

import 'tui-calendar/dist/tui-calendar.css';
import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-time-picker/dist/tui-time-picker.css';

export default (props) => <Calendar {...props} ref={props.forwardedRef} />;

schedule>index.jsx

import { forwardRef, useCallback, useRef, useState } from 'react';
import dynamic from 'next/dynamic';

const TuiCalendar = dynamic(() => import('@components/calendars/CalendarPage'), { ssr: false });
const CalendarWithForwardedRef = forwardRef((props, ref) => (
    <TuiCalendar {...props} forwardedRef={ref} />
));

const start = new Date();
const end = new Date(new Date().setMinutes(start.getMinutes() + 30));
const schedules = [
    {
        calendarId: '1',
        category: 'time',
        isVisible: true,
        title: 'Study',
        id: '1',
        body: 'Test',
        start,
        end,
    },
    {
        calendarId: '2',
        category: 'time',
        isVisible: true,
        title: 'Meeting',
        id: '2',
        body: 'Description',
        start: new Date(new Date().setHours(start.getHours() + 1)),
        end: new Date(new Date().setHours(start.getHours() + 2)),
    },
];

const calendars = [
    {
        id: '1',
        name: 'My Calendar',
        color: '#ffffff',
        bgColor: '#9e5fff',
        dragBgColor: '#9e5fff',
        borderColor: '#9e5fff',
    },
    {
        id: '2',
        name: 'Company',
        color: '#ffffff',
        bgColor: '#00a9ff',
        dragBgColor: '#00a9ff',
        borderColor: '#00a9ff',
    },
];

const SchedulePage = () => {
    const cal = useRef(null);

    const onClickSchedule = useCallback((e) => {
        const { calendarId, id } = e.schedule;
        const el = cal.current.calendarInst.getElement(id, calendarId);

        console.log(e, el.getBoundingClientRect());
    }, []);

    const onBeforeCreateSchedule = useCallback((scheduleData) => {
        console.log(scheduleData);

        const schedule = {
            id: String(Math.random()),
            title: scheduleData.title,
            isAllDay: scheduleData.isAllDay,
            start: scheduleData.start,
            end: scheduleData.end,
            category: scheduleData.isAllDay ? 'allday' : 'time',
            dueDateClass: '',
            location: scheduleData.location,
            raw: {
                class: scheduleData.raw['class'],
            },
            state: scheduleData.state,
        };

        cal.current.calendarInst.createSchedules([schedule]);
    }, []);

    const onBeforeDeleteSchedule = useCallback((res) => {
        console.log(res);

        const { id, calendarId } = res.schedule;

        cal.current.calendarInst.deleteSchedule(id, calendarId);
    }, []);

    const onBeforeUpdateSchedule = useCallback((e) => {
        console.log(e);

        const { schedule, changes } = e;

        cal.current.calendarInst.updateSchedule(schedule.id, schedule.calendarId, changes);
    }, []);

    function _getFormattedTime(time) {
        const date = new Date(time);
        const h = date.getHours();
        const m = date.getMinutes();

        return `${h}:${m}`;
    }

    function _getTimeTemplate(schedule, isAllDay) {
        var html = [];

        if (!isAllDay) {
            html.push('<strong>' + _getFormattedTime(schedule.start) + '</strong> ');
        }
        if (schedule.isPrivate) {
            html.push('<span class="calendar-font-icon ic-lock-b"></span>');
            html.push(' Private');
        } else {
            if (schedule.isReadOnly) {
                html.push('<span class="calendar-font-icon ic-readonly-b"></span>');
            } else if (schedule.recurrenceRule) {
                html.push('<span class="calendar-font-icon ic-repeat-b"></span>');
            } else if (schedule.attendees.length) {
                html.push('<span class="calendar-font-icon ic-user-b"></span>');
            } else if (schedule.location) {
                html.push('<span class="calendar-font-icon ic-location-b"></span>');
            }
            html.push(' ' + schedule.title);
        }

        return html.join('');
    }

    const templates = {
        time: function (schedule) {
            console.log(schedule);
            return _getTimeTemplate(schedule, false);
        },
    };

    return (
        <div className="App">
            <h1>Welcome to TOAST Ui Calendar</h1>
            <CalendarWithForwardedRef
                ref={cal}
                height="1000px"
                useCreationPopup={true}
                useDetailPopup={true}
                calendars={calendars}
                schedules={schedules}
                onClickSchedule={onClickSchedule}
                onBeforeCreateSchedule={onBeforeCreateSchedule}
                onBeforeDeleteSchedule={onBeforeDeleteSchedule}
                onBeforeUpdateSchedule={onBeforeUpdateSchedule}></CalendarWithForwardedRef>
        </div>
    );
};
export default SchedulePage;

I do not what I am doing wrong here but I keep getting this error

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `__WEBPACK_DEFAULT_EXPORT__`.

Call Stack
createFiberFromTypeAndProps
node_modulesreact-domcjsreact-dom.development.js (25058:0)
createFiberFromElement
node_modulesreact-domcjsreact-dom.development.js (25086:0)
reconcileSingleElement
node_modulesreact-domcjsreact-dom.development.js (14052:0)
reconcileChildFibers
node_modulesreact-domcjsreact-dom.development.js (14112:0)

Leave a Comment