Gatsby Build застрял на построении статического HTML для страниц - PullRequest
Новая
       33

Gatsby Build застрял на построении статического HTML для страниц

0 голосов
/ 03 июля 2019

Я пытаюсь встроить свой проект Gatsby в рабочие файлы.При запуске команды Gatsby build, процесс запускается и застревает в «Построении статического html для страниц»

Terminal: 

$ 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

Он продолжает работать, не выдавая ошибку и не останавливаясь.Я создал стартер Гэтсби и выполнил ту же команду, где он закончил строительство примерно за 30 секунд.Что мешает созданию моего сайта?

1 Ответ

1 голос
/ 03 июля 2019

Проблема здесь в том, что на «серверной стороне», как, например, когда Гэтсби рендерит страницы статически, они запускаются в среде, которая не имеет понятия «окно» или «документ» так что, хотя ваш код может работать, когда он запускается в браузере, он не работает здесь.

Простой трюк состоит в том, чтобы обернуть все, что требует наличия документа в операторе 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, запускается только на стороне клиента.

...