Gatsby: 窗口未定义

创建于 2016-06-02  ·  38评论  ·  资料来源: gatsbyjs/gatsby

我正在尝试将语义 ui 导入与我的组件一起使用。

在开发中工作正常，但如果我尝试gatsby build ，我会得到Error: ReferenceError: window is not defined 。

我这样做：

import $ from 'jquery';
$.fn.transition = require('semantic-ui-transition');
$.fn.dropdown = require('semantic-ui-dropdown');

有什么解决方法吗？

编辑：设法让它与：

try {
  $.fn.sidebar = require('semantic-ui-sidebar');
} catch (e) {
  console.log(e)
}
picture hitchcott
👍37

最有用的评论

那行得通！ 谢谢。

提示：输入typeof window !== 'undefined' && window.whaterver-you-need来解决这个问题。

picture Tseberechts 于 2017-05-17
👍126 🎉27 ❤23 🚀15 😄1

所有38条评论

是的，在开发过程中，react 组件仅在定义了window的浏览器中运行。 构建时，Gatsby 在未定义window的服务器上呈现这些组件。 通常，使用 React 的解决方案是仅访问window中的componentDidMount或在访问它之前检查window存在。 对于不这样做的第三方库，您所做的看起来很棒。

KyleAMathews picture KyleAMathews 于 2016-06-02
👍57 👎13 😕1

@KyleAMathews我似乎无法让componentDidMount使用gatsby develop在html.js或_template.jsx触发，也许它不应该，或者我正在做有事吗？

AndersDJohnson picture AndersDJohnson 于 2016-06-17
👍2

@hitchcott你能分享更多关于你的构建吗？ 我刚刚将语义 UI 安装到 gatsby 项目中，但我的 CSS 无法正常工作。 不确定如何在我的页面中加载 CSS。 React 假设内联样式是正确的，但它如何知道它们？ 另外我想我应该配置 webpack 来做 LESS 构建而不是 gulp。 你刚刚安装了 webpack-lessloader 吗？

Maxhodges picture Maxhodges 于 2016-07-06

@Maxhodges——它是 Webpack，而不是 React，它“知道”你的风格。 Webpack 知道，因为您在捆绑的 JS 文件中的某处导入或需要编译文件。

例如，我在_template.js文件中导入了我的主要styles.css ，因此当 Webpack 构建包时，它包含这些样式——在开发模式下内联； 生产中的外部引用文件（以cssLink为例）。

不需要额外的 LESS 加载器，因为 Gatsby 已经在其默认的 Webpack 配置中包含了一个。

kylegach picture kylegach 于 2016-07-06

对于那些按照 Gatsby GitHub 页面上的说明安装文档站点的人...
import { colors } from 'utils/colors'
是麻烦制造者，在注释掉这个和 ${colors.bg} 之后，网站发展得很好。

cybermill picture cybermill 于 2016-12-23

发生这种情况时是否可以显示更好的错误消息？ 我不知道在哪里可以找到错误。

Failed at generating HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
      throw err;
      ^
Error: ReferenceError: window is not defined
    at Object.defineProperty.value (render-page.js:44529:79)
    at __webpack_require__ (render-page.js:30:30)
    at Object.exports.__esModule (render-page.js:42560:24)
    at __webpack_require__ (render-page.js:30:30)
    at Object.defineProperty.value (render-page.js:42533:51)
    at __webpack_require__ (render-page.js:30:30)
    at Object.<anonymous> (render-page.js:80:19)
    at __webpack_require__ (render-page.js:30:30)
    at Object.assign.i (render-page.js:50:18)
    at render-page.js:53:10
error Command failed with exit code 1.
Tseberechts picture Tseberechts 于 2017-05-17

这真是个好主意！ 目前正在努力推进 1.0 所以不会得到这个
很快但现在，只需打开 public/render-page.js 到行号
在那里指示 (44529) 并查看导致问题的代码。

2017 年 5 月 17 日星期三上午 11:45 Thomas Seberechts [email protected]
写道：

发生这种情况时是否可以显示更好的错误消息？ 一世
不知道在哪里可以找到错误。

生成 HTML 失败

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
抛出错误；
^
错误：ReferenceError：窗口未定义
在 Object.defineProperty.value (render-page.js:44529:79)
在 __webpack_require__ (render-page.js:30:30)
在 Object.exports.__esModule (render-page.js:42560:24)
在 __webpack_require__ (render-page.js:30:30)
在 Object.defineProperty.value (render-page.js:42533:51)
在 __webpack_require__ (render-page.js:30:30)
在对象。(render-page.js:80:19)
在 __webpack_require__ (render-page.js:30:30)
在 Object.assign.i (render-page.js:50:18)
在 render-page.js:53:10
错误 命令失败，退出代码为 1。

—
你收到这个是因为你被提到了。

直接回复本邮件，在GitHub上查看
https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-302041105 ，
或静音线程
https://github.com/notifications/unsubscribe-auth/AAEVh6E9bZyyi0iX-Q7Q92VTvEb1DZbmks5r6sHGgaJpZM4Isiea
.

KyleAMathews picture KyleAMathews 于 2017-05-17

那行得通！ 谢谢。

提示：输入typeof window !== 'undefined' && window.whaterver-you-need来解决这个问题。

Tseberechts picture Tseberechts 于 2017-05-17
👍126 🎉27 ❤23 🚀15 😄1

使用componetDidMount时错误消失

mohhasbias picture mohhasbias 于 2017-11-19
👍1

我有一个类似的问题，但我使用 localStorage 在浏览器上保留我的一些 redux 状态。 如果我不能在 store.js 文件中使用window.localStorage ，我该如何绕过这个问题？

😢

谢谢！

gregorskii picture gregorskii 于 2017-11-28

@gregorskii

const windowGlobal = typeof window !== 'undefined' && window

然后， windowGlobal.localStorage

heldrida picture heldrida 于 2017-11-28
👍35 🎉4 ❤3

是的，这行得通，但我不得不使用https://www.npmjs.com/package/localstorage-memory模拟本地存储：

const windowGlobal = typeof window !== 'undefined' && window;
const localAdapter = windowGlobal ?
  adapter(windowGlobal.localStorage) :
  adapter(memoryStorage)
;

使用https://www.npmjs.com/package/redux-localstorage。

gregorskii picture gregorskii 于 2017-11-28
👍4

仅访问window componentDidMount window componentDidMount

第三方js的要点。

// index.js
import React from "react";
import Link from "gatsby-link";

// import "uikit/dist/js/uikit";
// Third party JS access `window` without
// `typeof window !== "undefined"` check

class Template extends React.Component {
  componentDidMount() {
    import("uikit/dist/js/uikit")
      .then((uikit) => {
        this.uikit = uikit;
      })
      .catch((error) => console.error(error));
  }
  render() {
    // ...
  }
}

// ...
CallMeLaNN picture CallMeLaNN 于 2018-03-15
👍2

@CallMeLaNN 的建议对我

WebpackError：元素未定义

将导入放入 componentDidMount 工作。

 componentDidMount() {
    try {
      this.UIkit = require("uikit/dist/js/uikit");
      this.Icons = require("uikit/dist/js/uikit-icons");
      this.UIkit.use(this.Icons);
    } catch (e) {
      console.error(e);
    }
  }
altcoder picture altcoder 于 2018-05-07
👍12 ❤2

是的，在开发过程中，react 组件仅在定义 window 的浏览器中运行。 构建时，Gatsby 在未定义窗口的服务器上呈现这些组件。 通常使用 React 的解决方案是仅在 componentDidMount 中访问窗口或在访问它之前检查该窗口是否存在。 对于不这样做的第三方库，您所做的看起来很棒。

尽早/突出地浮出水面会非常有帮助。 我是第一次尝试构建，现在我必须解决很多问题，因为我不知道这会成为一个问题。 因为我迫切需要部署它，所以压力特别大； 我正在提交某项建议，我需要该网站在线。

我只想部署到 Github Pages（至少现在是这样），所以我不需要 SSR。 有没有办法只为客户构建？

joshwcomeau picture joshwcomeau 于 2018-05-12
👍35 👎1

似乎在 Gatsby v2 中，您需要在 es6 和 commonjs 导入之间进行选择，由于与 webpack 4 相关的原因，您将无法再将它们混合在一起。

既然如此，并且假设您已经在使用 es6 导入，那么@jfaeldon 的解决方案似乎是此处使用的解决方案，而@hitchcott 的解决方案将不再适用。

有人可以确认吗？

justintemps picture justintemps 于 2018-09-20
😕1

@joshwcomeau完全同意你的看法，我也不认为只在浏览器中运行 dev 并在 node.js 中构建是一个好主意。 差异如此之大，就像在 DEV 和 PROD 环境中一样，您希望环境尽可能相似，我认为 gatsby 也应该这样做，在尽可能相似的环境中运行 dev 和 build。

hackhat picture hackhat 于 2018-10-14
👍4

所以我可以让它在浏览器中运行构建吗？ 我不需要SSR。

lili21 picture lili21 于 2018-12-19
👍6

你好，
我在这里遇到了同样的问题，Coverflow 对于 gatsby develop 工作正常，但对于构​​建它会引发错误：
WebpackError：窗口未定义

     - react-coverflow.js:1 Object.<anonymous>
       ~/react-coverflow/dist/react-coverflow.js:1:330

     - main.js:1 Object.<anonymous>
       ~/react-coverflow/main.js:1:1

从 'react-coverflow' 导入 Coverflow；
从“镭”导入 { StyleRoot }

class Team 扩展 React.Component {

使成为（）{
返回（

displayQuantityOfSide={2}
导航
无限滚动
启用标题
活跃={0}
媒体={{
' @media （最大宽度：720px）'：{
宽度: '100%',
高度：'200px'
},
' @media （最小宽度：720px）'：{
宽度: '100%',
高度：'400px'，
}
}}
>
Chairperson
Deputy Chairperson
General Secretary
Recording Secretary
Treasury
Marketing

  </Coverflow>
</StyleRoot>
)

}
}

导出默认团队；

PHILATSHAKA picture PHILATSHAKA 于 2019-01-08

我在安装了几个软件包后遇到了这个错误，所以它必须在其中一个中 - 但我找不到问题出在哪里。 任何人都有关于如何更好地找出它可能是哪个 npm 包的提示？ 该错误非常普遍。

wmlutz picture wmlutz 于 2019-03-06

也许反应实现更好？
https://react.semantic-ui.com/和https://github.com/pretzelhands/gatsby-starter-semantic-ui

muescha picture muescha 于 2019-03-06

@wmlutz我能提供的最简单的解释是，这是因为当你发出gatsby develop来构建你正在开发的项目，或者gatsby build && gatsby serve用于生产构建时，Gatsby 会在内部生成页面和 css、链接等。 但要记住的一件事是，这是在服务器端完成的，在节点端，而不是在客户端。 因此节点无法访问那些特定的 api，因为它们仅供客户端使用。 因此，开箱即用的某些软件包将无法与 Gatsby 搭配使用。 可能需要进行一些更改才能让它们“玩得很好”

jonniebigodes picture jonniebigodes 于 2019-03-06

@jonniebigodes - 谢谢。 我想我现在明白_为什么_了。 我的事情现在是_what_。 我愚蠢地做了大量的工作，但在确定哪个包导致问题时遇到了麻烦。 有没有办法用更详细的错误报告来gatsby build ？

wmlutz picture wmlutz 于 2019-03-06

@jonniebigodes - 我找到了导致问题的包： react toasts 。 我的下一个问题是弄清楚如何修复它。

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      ToastsStore.error("There was an error: " + result.msg)
    }
  }
wmlutz picture wmlutz 于 2019-03-07

@wmlutz类似于下面的代码块。 react在收到初始静态包后加载。 因此，当用户到达_handleSubmit window将存在。

请注意，如果react toasts在import上调用window ，那么您可能仍然会遇到错误。

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      if (window) ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      if (window) ToastsStore.error("There was an error: " + result.msg)
    }
  }
joserocha3 picture joserocha3 于 2019-03-07
👍1

同样的问题。 我会找到另一个 Toast 库或自己做。 不应该杀我。

wmlutz picture wmlutz 于 2019-03-07

@joserocha3这段代码只能在开发模式下工作。 当发出对生产构建的调用时，它将在error Building static HTML failed阶段失败。 由于 Gatsby 将内省导入并查找有问题的包，它会失败，因为这个包使用了一些非 node.js 和@wmlutz原生的 api，该包的代码非常简单，不应该太麻烦以适应您的情况。 为什么不分叉 repo，检查代码并创建一组适合您的组件？

jonniebigodes picture jonniebigodes 于 2019-03-07

我同意@jonniebigodes关于分叉的看法。 回购源只有几个文件。 违规调用是ToastsContainer.tsx的document引用。

或者试试上面提到的https://github.com/gatsbyjs/gatsby/issues/309#issuecomment -387039877。

joserocha3 picture joserocha3 于 2019-03-07

原因在于严格模式、UMD 和捆绑的工作方式。

如果您使用patch-package则不需要分叉。

DanielRuf picture DanielRuf 于 2019-03-07

另请参阅https://github.com/webpack/webpack/issues/6677和链接的问题。

这取决于您使用的代码 tgat 以及它们是否进行了适当的检查或完全使用umd目标并定义全局 objscts。

DanielRuf picture DanielRuf 于 2019-03-07

大家好，我仍然遇到同样的问题，我没有在我的项目中使用任何窗口函数，但它仍然抛出同样的错误，为什么我有这个..？

1:09:03 AM：构建准备开始
上午 11:09:05：构建映像版本：9e0f207a27642d0115b1ca97cd5e8cebbe492f63
上午 11:09:05：构建镜像标签：v3.3.2
上午 11:09:05：构建机器人版本：75cd99f62ada9e21edea53208e8baf0eab85a045
11:09:06 AM：获取缓存的依赖项
上午 11:09:06：开始下载 194.6MB 的缓存
11:09:07 AM：1.636969993s内完成下载缓存
11:09:07 AM：开始提取缓存
上午 11:09:17：在 9.693656527 秒内完成提取缓存
11:09:17 AM：在 11.478174001s 内完成获取缓存
11:09:17 AM：开始准备构建的repo
11:09:17 AM：准备 Git 参考 pull/21/head
上午 11:09:18：找到 netlify.toml。 覆盖站点配置
11:09:18 AM：开始构建脚本
11:09:18 AM：安装依赖项
11:09:19 AM：开始恢复缓存节点版本
11:09:22 AM：完成恢复缓存节点版本
上午 11:09:23：已安装 v10.16.0。
上午 11:09:24：现在使用节点 v10.16.0 (npm v6.9.0)
上午 11:09:25：尝试使用 ruby​​ 版本 2.6.2，从环境中读取
上午 11:09:27：使用 ruby​​ 版本 2.6.2
上午 11:09:27：使用 PHP 5.6 版
11:09:27 AM：开始恢复缓存的节点模块
上午 11:09:27：完成恢复缓存节点模块
11:09:27 AM：开始恢复缓存的纱线缓存
上午 11:09:27：完成恢复缓存的纱线缓存
11:09:28 AM：使用 Yarn 1.9.4 版安装 NPM 模块
上午 11:09:29：纱线安装 v1.9.4
上午 11:09:29：警告 package.json：无许可证字段
上午 11:09:29：发现警告 package-lock.json。 您的项目包含由 Yarn 以外的工具生成的锁定文件。 建议不要混用包管理器，以免因锁文件不同步导致解析不一致。 要清除此警告，请删除 package-lock.json。
上午 11:09:29：警告 [email protected]：无许可证字段
11:09:29 AM：[1/4] 正在解析包...
11:09:31 AM：[2/4] 正在取包裹...
上午 11:09:31：（节点：1201）[DEP0005] 弃用警告：由于安全和可用性问题，不推荐使用 Buffer()。 请改用 Buffer.alloc()、Buffer.allocUnsafe() 或 Buffer.from() 方法。
上午 11:10:04：info [email protected]：平台“linux”与此模块不兼容。
上午 11:10:04：信息“[email protected]”是可选的依赖项并且兼容性检查失败。 从安装中排除它。
上午 11:10:04：[3/4] 链接依赖项...
上午 11:10:04：警告“gatsby > [email protected]”具有不正确的对等依赖关系“graphql@^0.12.0 || ^0.13.0”。
上午 11:10:04：警告“gatsby > [email protected]”具有不正确的对等依赖关系“graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0”。
上午 11:10:04：警告“gatsby > [email protected]”具有不正确的对等依赖关系“graphql@^0.13.0”。
上午 11:10:04：警告“gatsby-plugin-netlify > [email protected]”具有未满足的对等依赖项“webpack@>=4.4.0”。
上午 11:10:04：警告“gatsby-plugin-sass > [email protected]”具有未满足的对等依赖项“webpack@^3.0.0 || ^4.0.0”。
上午 11:10:04：警告“> [email protected]”具有未满足的对等依赖项“webpack@^2.0.0 || ^3.0.0 || ^4.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“immutable@^3.7.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-lib-auth@^2.0.4”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-lib-util@^2.1.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“immutable@^3.7.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-lib-auth@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-lib-util@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-lib-auth@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-lib-util@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“immutable@^3.7.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-lib-auth@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-lib-util@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“immutable@^3.8.2”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-lib-util@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-immutable-proptypes@^2.1.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-lib-util@^2.0.4”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“react-immutable-proptypes@^2.1.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“moment@^2.11.2”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“immutable@^3.7.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-immutable-proptypes@^2.1.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“immutable@^3.7.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“immutable@^3.7.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-immutable-proptypes@^2.1.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-immutable-proptypes@^2.1.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“immutable@^3.7.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.5”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-immutable-proptypes@^2.1.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“immutable@^3.7.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-immutable-proptypes@^2.1.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖项“immutable@^3.7.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-emotion@^9.2.5”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“immutable@^3.7.6”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“react-immutable-proptypes@^2.1.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > [email protected]”具有未满足的对等依赖性“netlify-cms-ui-default@^2.0.0”。
上午 11:10:04：警告“netlify-cms > netlify-cms-widget-date > [email protected]”具有未满足的对等依赖性“moment@>=2.16.0”。
上午 11:10:04：警告“netlify-cms > netlify-cms-widget-markdown > [email protected]”具有未满足的对等依赖项“immutable@>=3.8.1”。
上午 11:10:04：警告“netlify-cms > netlify-cms-widget-markdown > [email protected]”具有未满足的对等依赖项“immutable@^3.8.2”。
上午 11:10:04：警告“netlify-cms > netlify-cms-widget-markdown > [email protected]”具有不正确的对等依赖性“slate@^0.32.0”。
上午 11:10:04：警告“netlify-cms > netlify-cms-widget-markdown > [email protected]”具有未满足的对等依赖项“immutable@^3.8.1”。
上午 11:10:04：警告“netlify-cms > netlify-cms-widget-markdown > [email protected]”具有不正确的对等依赖性“slate@^0.33.3”。
上午 11:10:04：警告“netlify-cms > netlify-cms-widget-markdown > [email protected]”具有未满足的对等依赖性“slate-schema-violations@^0.1.7”。
上午 11:10:04：警告“netlify-cms > netlify-cms-widget-markdown > [email protected]”具有未满足的对等依赖项“immutable@>=3.8.1”。
上午 11:10:04：警告“netlify-cms > netlify-cms-widget-markdown > [email protected]”具有未满足的对等依赖项“immutable@>=3.8.1”。
上午 11:10:04：警告“netlify-cms > netlify-cms-core > redux-notifications > [email protected]”具有不正确的对等依赖关系“redux@^2.0.0 || ^3.0.0”。
上午 11:10:04：警告“netlify-cms > netlify-cms-widget-markdown > slate-react > [email protected]”具有未满足的对等依赖项“immutable@>=3.8.1”。
上午 11:10:04：警告“> [email protected]”具有不正确的对等依赖关系“react@^16.8.3”。
11:10:21 AM：[4/4] 构建新鲜包...
上午 11:10:26：在 56.59 秒内完成。
上午 11:10:26：使用 Yarn 安装 NPM 模块
上午 11:10:26：警告 package.json：无许可证字段
上午 11:10:26：开始恢复缓存的 Go 缓存
上午 11:10:26：完成恢复缓存的 go cache
上午 11:10:27：取消设置 GOOS；
11:10:27 AM：取消设置GOARCH；
上午 11:10:27：导出 GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
上午 11:10:27：导出 PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
11:10:27 AM：去版本>&2;
上午 11:10:27：导出 GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env'；
上午 11:10:27：go 版本 go1.12 linux/amd64
11:10:27 AM：安装缺少的命令
11:10:27 AM：验证运行目录
11:10:27 AM：执行用户命令：npm run build
上午 11:10:27：> [email protected] build /opt/build/repo
上午 11:10:27：> 运行-p 构建：**
上午 11:10:28：> [email protected] build:app /opt/build/repo
上午 11:10:28：> npm run clean && gatsby build
上午 11:10:28：> [email protected] clean /opt/build/repo
上午 11:10:28：> rimraf .cache public
上午 11:10:32：使用环境配置：“生产”
上午 11:10:32：成功打开并验证 gatsby-configs — 0.059 秒
上午 11:10:32：成功加载插件 — 0.454 秒
上午 11:10:34：成功 onPreInit — 1.665 秒
上午 11:10:34：成功从以前的版本中删除 html 和 css 文件 — 0.008 s
上午 11:10:34：成功初始化缓存 — 0.011 秒
上午 11:10:34：成功复制 gatsby 文件 — 0.035 秒
上午 11:10:34：成功 onPreBootstrap — 0.009 秒
上午 11:10:51：成功源和转换节点 — 17.231 秒
上午 11:10:52：成功构建架构 — 0.896 秒
上午 11:10:55：成功 createPages — 2.772 秒
上午 11:10:55：成功 createPagesStatefully — 0.062 秒
上午 11:10:55：成功 onPreExtractQueries — 0.006 秒
上午 11:10:56：成功更新架构 — 0.712 秒
上午 11:10:56：成功从组件中提取查询 — 0.166 秒
上午 11:10:57：成功运行 graphql 查询 — 1.068 秒 — 1460/1460 1368.43 查询/秒
上午 11:10:57：成功写出页面数据 — 0.035 秒
上午 11:10:57：成功写出重定向数据 — 0.001 秒
上午 11:10:57：成功 onPostBootstrap — 0.010 秒
上午 11:10:57：信息引导程序完成 - 28.304 秒
上午 11:12:14：成功构建生产 JavaScript 和 CSS 包 — 76.329 秒
上午 11:12:14：
上午 11:12:14：gatsby-plugin-purgecss：
上午 11:12:14：上一个 CSS 大小：305.33 KB
上午 11:12:14：新 CSS 大小：305.33 KB (-0.00%)
上午 11:12:14：删除了 ~0.00 KB 的 CSS
上午 11:12:14：
11:12:23 AM：错误构建静态 HTML 失败
上午 11:12:23：请参阅有关调试 HTML 构建的文档页面以获取帮助 https://gatsby.app/debug-html
上午 11:12:23：48 | window.YouTubeIframeLoader = YouTubeIframeLoader;
上午 11:12:23：49 | }
上午 11:12:23：> 50 | }（窗户））;
上午 11:12:23： | ^
上午 11:12:23：51 |
上午 11:12:23：
上午 11:12:23：WebpackError：ReferenceError：未定义窗口
上午 11:12:23：
上午 11:12:23：- index.js:50 Object../node_modules/youtube-iframe/index.js
上午 11:12:23：[lib]/[youtube-iframe]/index.js:50:2
上午 11:12:23：
上午 11:12:23： -引导程序：19 __webpack_require__
上午 11:12:23：lib/webpack/ bootstrap:19 :1
上午 11:12:23：
上午 11:12:23：- MediaAutoTrack.js:15 Object../node_modules/@aws-amplify/analytics/lib/Provid ers/AmazonPersonalizeHelper/MediaAutoTrack.js
上午 11:12:23：[lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeHelper/MediaAu toTrack.js:15:27
上午 11:12:23：
上午 11:12:23： -引导程序：19 __webpack_require__
上午 11:12:23：lib/webpack/ bootstrap:19 :1
上午 11:12:23：
上午 11:12:23：- index.js:7 Object../node_modules/@aws-amplify/analytics/lib/Providers/Amazon PersonalizeHelper/index.js
上午 11:12:23：[lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeHelper/index.js:7:10
上午 11:12:23：
上午 11:12:23： -引导程序：19 __webpack_require__
上午 11:12:23：lib/webpack/ bootstrap:19 :1
上午 11:12:23：
上午 11:12:23：- AmazonPersonalizeProvider.js:52 Object../node_modules/@aws-amplify/analytics /lib/Providers/AmazonPersonalizeProvider.js
上午 11:12:23：[lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeProvider.js:52:33
上午 11:12:23：
上午 11:12:23： -引导程序：19 __webpack_require__
上午 11:12:23：lib/webpack/ bootstrap:19 :1
上午 11:12:23：
上午 11:12:23：- index.js:7 Object../node_modules/@aws-amplify/analytics/lib/Providers/index. js
上午 11:12:23：[lib]/[@aws-amplify]/analytics/lib/Providers/index.js:7:35
上午 11:12:23：
上午 11:12:23： -引导程序：19 __webpack_require__
上午 11:12:23：lib/webpack/ bootstrap:19 :1
上午 11:12:23：
上午 11:12:23：- index.js:33 Object../node_modules/@aws-amplify/analytics/lib/index.js
上午 11:12:23：[lib]/[@aws-amplify]/analytics/lib/index.js:33:10
上午 11:12:24：“构建站点”阶段失败：构建脚本返回非零退出代码：1
上午 11:12:23：
上午 11:12:23： -引导程序：19 __webpack_require__
上午 11:12:23：lib/webpack/ bootstrap:19 :1
上午 11:12:23：
上午 11:12:24：关闭日志记录，58 条消息待处理

leonardolouie picture leonardolouie 于 2019-06-20

我在服务器端使用 netlify

leonardolouie picture leonardolouie 于 2019-06-20

如果您确定您没有使用窗口，则可能是一个包。

你必须在 webpack 中定义一个空窗口。

这不是非常直接，但这会引导您朝着正确的方向前进：

https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack

gregorskii picture gregorskii 于 2019-06-20

我不确定为什么这个问题被关闭了？ 事实上，这个问题可能是盖茨比关注的最关键的问题，它的整个哲学应该被改变和修复。

浏览器和 SSR 逻辑耦合真的很糟糕。 更不用说您在开发中运行一个版本的代码而在生产中运行它的差异这一事实。 这真的很糟糕。 你为什么要建造这样的建筑？ 这两者之间的唯一区别应该是在开发中启用调试功能，例如源映射或其他。 这确实使使用 Gatsby 变得困难且引人入胜。

在我看来，你应该重新打开这个并优先考虑这个问题。 这个问题让人们真的放弃了依赖 window 的数千个模块，并不是所有的模块都可以在 componentDidMount 中导入，例如 HOC 之类的模块等。

agjs picture agjs 于 2019-06-24
👍39 👎1

虽然我不反对，但这是一个痛点。 有人可能会争辩说，那些用围绕 window 变量的逻辑编写的库不适合 SSR 使用。 这些库本身应该检查窗口是否已定义并在 SSR 模式下工作。

对于您提出的更深层次的观点，没有其他评论，这是更适合维护者的哲学讨论。

gregorskii picture gregorskii 于 2019-06-24

恕我直言，你写的东西毫无意义。 为什么正在构建“仅浏览器”库的人会检查 window 对象是否存在？ 您能否命名或指向整个 NPM 注册表中执行此操作的单个库？ 或者你是说人们写的所有那些库都写错了？

或者人们应该考虑有一个叫做“Gatsby”的框架需要这个？ 人们应该能够在一端或另一端使用 Gatsby，并且这些端应该完全解耦。 这是唯一的一点，真的。 没有什么哲学意义。

agjs picture agjs 于 2019-06-24
👍11

按照设计 Gatsby 是一个静态站点生成器。 它完成的大部分工作都是在编译时在浏览器之外完成的。 它不仅仅是一个“客户端”或“浏览器”工具。

根据定义，服务器端渲染是在“服务器”端完成的，其中“窗口”不是一个东西。

Gatsby 的编译是用 Webpack 完成的，webpack 默认不绑定 window 变量。 根据我的经验，让客户端库在 webpack 下工作的方法不止一种。 这导致 Gatsby 配置本身无法提供简单的一次性解决方案来修复依赖于“window”的所有库。

FWIW 我认为将工具的一部分分开来讨论它的哪一部分阻碍了你想要做的事情是有道理的。

gregorskii picture gregorskii 于 2019-06-24
👍3

image

rein96 picture rein96 于 2020-08-07
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

signalwerk picture signalwerk  ·  3评论
magicly picture magicly  ·  3评论
andykais picture andykais  ·  3评论
ferMartz picture ferMartz  ·  3评论
benstr picture benstr  ·  3评论