How to fix ReferenceError: window is not defined in ReactJS

Question

I'm using tui-calendar for my project https://github.com/nhn/toast-ui.react-calendar and got bug "ReferenceError: window is not defined" when I try to "yarn start"

})(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.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

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

Answer 1

I saw \build\server.js in your error log. So, the root cause is highly likely the SSR.

Your UI component is either not compatible with SSR or not correctly configured. When you run yarn start, there's no window object at server side. But as you noticed, you could still make it work by importing it in a running project, whose pages have been already rendered in the browser.