Gatsby Build 坚持为页面构建静态 HTML

Question

我正在尝试将我的 Gatsby 项目构建到生产文件中。运行 Gatsby build 命令时，进程运行并卡在“为页面构建静态 html”

终端：

$ gatsby build
success open and validate gatsby-configs — 0.006 s
success load plugins — 0.419 s
success onPreInit — 0.064 s
success delete html and css files from previous builds — 0.257 s
success initialize cache — 0.006 s
success copy gatsby files — 0.061 s
success onPreBootstrap — 0.010 s
success source and transform nodes — 0.155 s
success building schema — 0.173 s
success createPages — 0.000 s
success createPagesStatefully — 0.047 s
success onPreExtractQueries — 0.004 s
success update schema — 0.022 s
warning Using the global `graphql` tag is deprecated, and will not be supported in v3.
Import it instead like:  import { graphql } from 'gatsby' in file:
/website/src/components/image.js
success extract queries from components — 0.266 s
success run static queries — 0.229 s — 6/6 26.29 queries/second
success run page queries — 0.003 s — 2/2 902.62 queries/second
success write out page data — 0.004 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.000 s

info bootstrap finished - 4.846 s

success Building production JavaScript and CSS bundles — 8.720 s
⡀ Building static HTML for pages{ department: 'obj1',
  numEmployees: 2,
  avgHrs: 18,
  avgRate: 15,
  other: 200 }
{ department: 'obj2',
  numEmployees: 4,
  avgHrs: 17,
  avgRate: 13,
  other: 150 }
{ department: 'obj3',
  numEmployees: 3,
  avgHrs: 20,
  avgRate: 22,
  other: 250 }
[ 'department', 'numEmployees', 'avgHrs', 'avgRate', 'other' ]
0
0
[ 'department', 'numEmployees', 'avgHrs', 'avgRate', 'other' ]
1
1
[ 'department', 'numEmployees', 'avgHrs', 'avgRate', 'other' ]
2
2
undefined
undefined
⢀ Building static HTML for pages /website/public/render-page.js:27034
    var el = document.getElementById("myChart" + index);
             ^

ReferenceError: document is not defined
    at charting (/website/public/render-page.js:27034:14)
    at Timeout._onTimeout (/website/public/render-page.js:27103:9)
    at ontimeout (timers.js:498:11)
    at tryOnTimeout (timers.js:323:5)
    at Timer.listOnTimeout (timers.js:290:5)
⠁ Building static HTML for pages

它继续运行，不会抛出错误并停止。我创建了一个 Gatsby 启动器并运行相同的命令，它在大约 30 秒内完成构建。是什么阻止了我的网站建设？

Answer 1

这里的问题是，在“服务器端”，例如，当 Gatsby 静态呈现页面时，它们是在没有“窗口”或“文档”概念的环境中运行的，所以虽然您的代码在浏览器中运行时可能会工作，但在这里却失败了。

一个简单的技巧是在 if 语句中包装任何需要文档的东西

if(typeof(document) !== 'undefined') { ... }（或您的首选）。

您还可以使用一些组件来包装页面的块，例如React NoSSR，它就是这样做的：

import React from 'react';
import NoSSR from 'react-no-ssr';
import MyChart from './MyChart.jsx';

const MyChartPage = () => (
  <div>
    <h2>My Chart Page</h2>
    <hr />
    <NoSSR>
      <MyChart />
    </NoSSR>
  </div>
);

当它在服务器端呈现时，NoSSR 规则会忽略呈现，并且需要 document 的代码仅在客户端运行。