ref prop is not exist in calendar ==> so i can not use instance method

[김주호]

Version

"@toast-ui/react-calendar": "^1.0.5"
"tui-calendar": "^1.12.13"

Test Environment

"next": "9.3.6
Microsoft Edge 84.0.522.40

Current Behavior

Cannot find ref prop in Calendar

Property 'ref' does not exist on type 'IntrinsicAttributes & IOptions & EventMaps & { height: string; view?: string | undefined; schedules?: ISchedule[] | undefined; } & HTMLAttributes<...> & { ...; }'.

const MonthlyCalendar: FC<MonthlyCalendarProps> = function (props) {
  const ref = useRef()
  return (
    <Box display="flex" flexDirection="column" alignItems="stretch" pt={3} pb={3}>
      <Header />
      <Calendar 
        {...defaultProps} 
        ref={ref}  // ERROR HERE
        view="month" 
        height="800px" 
        {...props} />
    </Box>
  )
}
  )
}

Expected Behavior

ref prop exists

[유동식]

@jungeun-cho Check this issue please.

[조정은]

@naram-dash
TOAST UI Calendar does not support SSR.
Please check the usage on next.js.
https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

import dynamic from 'next/dynamic';

const TuiCalendar = dynamic(() => import('@toast-ui/react-calendar'), { ssr: false });

...

<TuiCalendar height="1000px"></TuiCalendar>

but ref cannot be used properly due to dynamic() of Next.js.
You can use React.fowardRef().

// components/TuiCalendarWrapper.js
import React from "react";
import Calendar from "@toast-ui/react-calendar";


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

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

...
      <CalendarWithForwardedRef
        ref={cal}
        height="1000px"
        useCreationPopup={true}
        useDetailPopup={true}
        calendars={calendars}
        schedules={schedules}
        onClickSchedule={onClickSchedule}
        onBeforeCreateSchedule={onBeforeCreateSchedule}
        onBeforeDeleteSchedule={onBeforeDeleteSchedule}
        onBeforeUpdateSchedule={onBeforeUpdateSchedule}></CalendarWithForwardedRef>

[김주호]

Thank you! It works!!

there was confusing moment at importing Calendar because tui-calendar has Calendar and @toast-ui/react-calendar also has Calendar...

Below codes are my codes in Typescript

TUICalendarWrapper.tsx

import React, { HTMLAttributes, FC, LegacyRef } from 'react'
import Calendar, { EventMaps } from '@toast-ui/react-calendar'
import { IOptions, ISchedule } from 'tui-calendar'

export type TUICalendarProps = IOptions &
  EventMaps & {
    height: string
    view?: string
    schedules?: ISchedule[]
  } & HTMLAttributes<HTMLElement>

type TUICalendarPropsWithRef = {
  forwardedRef: LegacyRef<Calendar>
} & TUICalendarProps

const TUICalendarWrapper: FC<TUICalendarPropsWithRef> = function (props) {
  return <Calendar {...props} ref={props.forwardedRef} />
}

export default TUICalendarWrapper

TUICalendar.tsx

import React, { forwardRef } from 'react'
import dynamic from 'next/dynamic'
import Calendar from '@toast-ui/react-calendar'
import { TUICalendarProps } from './TUICalendarWrapper'
const TuiCalendar = dynamic(() => import('./TUICalendarWrapper'), { ssr: false })

const TUICalendarWithForwardedRef = forwardRef<Calendar, TUICalendarProps>(
  function forwardRefTUICalendar(props, ref) {
    return <TuiCalendar {...props} forwardedRef={ref} />
  }
)

export default TUICalendarWithForwardedRef

somewhere...

...
import Calendar from '@toast-ui/react-calendar'
import TUICalendarWithForwardedRef from './TUICalendar'
import { TUICalendarProps } from './TUICalendarWrapper'

interface MonthlyCalendarProps extends TUICalendarProps {
  // const ref = useRef<Calendar>(null)
  calRef: RefObject<Calendar>
  boxProps?: BoxProps
}
const MonthlyCalendar: FC<MonthlyCalendarProps> = function ({ calRef, ...props }) {
  return (
    <Box display="flex" flexDirection="column" alignItems="stretch" pt={3} pb={3}>
      <Header calRef={calRef} />
      <TUICalendarWithForwardedRef {...defaultProps} ref={calRef} view="month" {...props} />
    </Box>
  )
}
...

[Alexej Kloos]

@jungeun-cho If i change my state, i have no more the reference for the calendar instance. Do you also use state with ref in combination?

[Dohyung Ahn]

@approached Could you provide an example reproducing the error so that I can check it?
Codesandbox, Stackblitz sandboxes would be great.

[Yu Xiang Z.]

@adhrinae I tried this solution and also the one @jungeun-cho put above.
It works wonders when I run the server with next dev.
next build also succeeds, now my problem is when I do next start to run the optimized production version.
Instead of the calendar I see Application error: a client-side exception has occurred (see the browser console for more information)

Here are two examples of errors from the browser console:

TypeError: Cannot read properties of undefined (reading 'createElement')
    at new l (8898206d.271461cbb2f9a4d9.js:1:168485)
    at new o (8898206d.271461cbb2f9a4d9.js:1:164885)
    at 8898206d.271461cbb2f9a4d9.js:1:111041
    at f (441.7a1f7f007f9407e8.js:1:11644)
    at Object.h [as forEach] (441.7a1f7f007f9407e8.js:1:11799)
    at 8898206d.271461cbb2f9a4d9.js:1:110975
    at f (441.7a1f7f007f9407e8.js:1:11644)
    at Object.h [as forEach] (441.7a1f7f007f9407e8.js:1:11799)
    at a.exports (8898206d.271461cbb2f9a4d9.js:1:110525)
    at s.changeView (8898206d.271461cbb2f9a4d9.js:1:102232)

TypeError: Cannot read properties of null (reading 'destroy')
    at t.value (441.7a1f7f007f9407e8.js:1:6311)
    at oh (framework-433e73989db4e225.js:1:87751)
    at uh (framework-433e73989db4e225.js:1:89601)
    at Bi (framework-433e73989db4e225.js:1:101643)
    at b.unstable_runWithPriority (framework-433e73989db4e225.js:1:129126)
    at Se (framework-433e73989db4e225.js:1:44859)
    at Ai (framework-433e73989db4e225.js:1:99588)
    at ni (framework-433e73989db4e225.js:1:95688)
    at framework-433e73989db4e225.js:1:45085
    at b.unstable_runWithPriority (framework-433e73989db4e225.js:1:129126)