Question

我在我的项目https://github.com/nhn/toast-ui.react-calendar中使用tui-calendar，并且在尝试“纱线启动”时出现错误“ ReferenceError：未定义窗口”

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

如果我在项目运行时添加日历组件，则它可以正常工作。

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 但窗口仅在浏览器中定义。所以你必须用服务器来提供你的文件。更简单的方法，对于开发，使用 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端口打开浏览器。这是针对开发环境的。在生产中，您应该设置一个自定义服务器，如快速服务器。

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

2 个答案: