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

Can you provide some code example or a reproducible part of your code? — iba
– iba, Commented Jun 1, 2020 at 9:26
I'm using it like this: codesandbox.io/s/laughing-knuth-de09g?file=/src/App.js but I don't know why my local project can't start while codesanbox is working — dungreact
– dungreact, Commented Jun 1, 2020 at 9:31
Have you tried deleting node_modules folder (rm -rf node_modules) and then reinstalling using "yarn" ? — iba
– iba, Commented Jun 1, 2020 at 10:06
Are you using some custom webpack configuration or create-react-app defaults? — iba
– iba, Commented Jun 1, 2020 at 11:44

AnLuoRidge · Accepted Answer · 2020-08-14 04:30:45Z

3

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.

answered Aug 14, 2020 at 4:30

AnLuoRidge

766 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yilmaz · Accepted Answer · 2020-12-29 20:22:59Z

 yarn start

I believe it is causing because of start script. You might be building app and then and your start script is like this:

"start":"node build/bundle.js" // path of bundle.

When you do that there is no browser environment. "bundle.js" is just a regular javascript file, and in that file window is used but window is defined only in browser. So you have to serve your file with a server. Easier way, for development, use webpack-dev-server. Here is the config that you should add to the webpack.config.js:

devServer: {
historyApiFallback: true,
contentBase: path.join(__dirname, "build"), // build is output folder 
overlay: true,
 },

this is script that you should set in package.json:

 "start":""webpack-dev-server --open"

It will automatically open the browser at port 8080. This is for development environment. In production you should set a custom server like express server.

Collectives™ on Stack Overflow

How to fix ReferenceError: window is not defined in ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest