CODEWITHSUNDEEP
reactjsbuildterminalgatsbyproduction
bjwhip
bjwhip

Reputation: 467

Gatsby Build stuck on Building Static HTML for Pages

Im trying to build my Gatsby project into production files. When running the command Gatsby build, the process runs and gets stuck at "Building static html for pages"

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

It keeps running, without throwing an error and stopping. I created a Gatsby starter and ran the same command, where it finished building in around 30 seconds. What is preventing my website from building?

Upvotes: 1

Views: 2435

Answers (1)

stef
stef

Reputation: 14268

The problem here is that on the "server-side", as in, when Gatsby is rendering the pages statically, they are run within an environment that doesn't have a concept of a "window" or a "document", so while your code here might work when it's run inside a browser, it fails here.

A simple trick is to wrap anything that requires there to be a document in an if statement

if(typeof(document) !== 'undefined') { ... } (or your preferred alternative).

There are also components that you can use to wrap chunks of the page, for instance React NoSSR, which does this like so:

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>
);

When this is rendered server-side, the NoSSR rule ignores rendering, and your code requiring a document runs only on the client-side.

Upvotes: 2

Related Questions