Closed naramdash closed 4 years ago
@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>
)
}
...
@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?
@approached Could you provide an example reproducing the error so that I can check it? Codesandbox, Stackblitz sandboxes would be great.
@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)
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<...> & { ...; }'.
Expected Behavior
ref prop exists