ReferenceError: window is not defined

[dunfe]

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

})(window, function(__WEBPACK_EXTERNAL_MODULE_tui_code_snippet__, __WEBPACK_EXTERNAL_MODULE_tui_date_picker__) {
   ^

ReferenceError: window is not defined
    at Object.<anonymous> (C:\Users\Thao\Documents\Github\App\node_modules\tui-calendar\dist\tui-calendar.js:16:4)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at eval (webpack:///external_%22tui-calendar%22?:1:18)
    at Object.tui-calendar (C:\Users\Thao\Documents\Github\App\build\server.js:21026:1)
    at __webpack_require__ (C:\Users\Thao\Documents\Github\App\build\server.js:21:30)
error Command failed with exit code 1.

import Calendar from "@toast-ui/react-calendar";
import "tui-calendar/dist/tui-calendar.css"

const CalendarComponent = () => {
   return (
      <Calendar height="100vh"/>
   )
}

export default CalendarComponent;

Expected Behavior

How to fix this error? Thanks!

[naramdash]

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 })

[yuxiang-zhang]

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?

[adhrinae]

@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]

@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.

[adhrinae]

@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.