如何修复ReferenceError: ReactJS中未定义窗口

Question

我正在为我的项目https://github.com/nhn/toast-ui.react-calendar使用tui日历，当我尝试"yarn start“时得到错误"ReferenceError: window is not defined”。

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

如果我在项目运行时添加Calendar组件，那么它就正常工作了。

import Calendar from "@toast-ui/react-calendar";

但它不能以“纱线开始”开始

根本原因是什么？谢谢

Answer 1

我在你的错误日志里看到了\build\server.js。因此，根本原因很可能是SSR。

您的UI组件与SSR不兼容或配置不正确。在运行yarn start时，服务器端没有window对象。但正如您所注意到的，您仍然可以通过将其导入到正在运行的项目中来使其工作，该项目的页面已经在浏览器中呈现。

Answer 2

 yarn start 

我相信这是因为启动脚本造成的。您可能正在构建应用程序，然后您的启动脚本如下：

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

当你这样做的时候，没有浏览器环境。"bundle.js“只是一个普通的javascript文件，在该文件中使用了window，但window仅在浏览器中定义。所以你必须用服务器来服务你的文件。对于开发，更简单的方法是使用webpack-dev-server。下面是您应该添加到webpack.config.js中的配置：

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

这是您应该在package.json中设置的脚本：

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

它将在端口8080处自动打开浏览器。这是针对开发环境的。在生产中，您应该设置一个自定义服务器，如express server。