Closed dunfe closed 4 years ago
I had the same experience when I used nextjs.
it seems like, toast ui calendar rendering function using window object that is inside web browser, not nodejs
so no use SSR option by using next/dynamic
import dynamic from 'next/dynamic'
const CalendarNoSSR = dynamic(() => import('@toast-ui/react-calendar'), { ssr: false })
I had the same experience when I used nextjs.
it seems like, toast ui calendar rendering function using window object that is inside web browser, not nodejs
so no use SSR option by using next/dynamic
import dynamic from 'next/dynamic' const CalendarNoSSR = dynamic(() => import('@toast-ui/react-calendar'), { ssr: false })
This worked like a charm with next dev
next build
runs fine too
but after next start
I get some TypeErrors like these two:
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)
I can't see the calendar as a result and my page shows Application error: a client-side exception has occurred (see the browser console for more information).
Any idea why?
@yuxiang-zhang
I cannot reproduce the problem when I created and tested it in a new Next.js project. Could you provide and detailed example code reproducing the error through the GitHub repository?
@yuxiang-zhang
I cannot reproduce the problem when I created and tested it in a new Next.js project. Could you provide and detailed example code reproducing the error through the GitHub repository?
Thank you so much. After reading your message, I found out it was caused by SWC minify release candidate enabled. https://nextjs.org/docs/messages/swc-minify-enabled
. I guess SWC minification breaks tui calendar code. I turned that off in my next.config.js
and the production build works again.
@yuxiang-zhang
Good to know it works somehow. I'll investigate it later. My first guess is that the calendar only supports CommonJS at this moment though.
Version
1.0.5
Test Environment
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36
Current Behavior
If I add Calendar component while the project is running so it's work. import Calendar from "@toast-ui/react-calendar"; but it's can't start with "yarn start" What is the root cause? Thanks
Expected Behavior
How to fix this error? Thanks!