Gatsby build fails with "Cannot read property 'page_blocks' of null" - npm

Question

I have a Gatsby site that retrieves data from a Wordpress Rest endpoint.
I am able to run gatsby develop locally on my laptop, but when I run gatsby build on my server to deploy my site, the process crashes and I get the following output with an error at the end:
success open and validate gatsby-configs - 0.085s
success load plugins - 0.523s
success onPreInit - 0.005s
success delete html and css files from previous builds - 0.021s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.022s
success copy gatsby files - 0.040s
success onPreBootstrap - 0.014s
success createSchemaCustomization - 0.009s
-> wordpress__acf_options fetched : 1
-> wordpress__acf_v2 fetched : 1
-> wordpress__wp_api_menus_v2 fetched : 1
-> wordpress__wp_api_menus_menus_items fetched : 1
-> wordpress__wp_api_menus_menus fetched : 1
-> wordpress__wp_api_menus_menu_locations fetched : 1
-> wordpress__wp_v2 fetched : 1
-> wordpress__POST fetched : 1
-> wordpress__PAGE fetched : 7
-> wordpress__wp_media fetched : 0
-> wordpress__wp_blocks fetched : 0
-> wordpress__wp_types fetched : 1
-> wordpress__wp_statuses fetched : 1
-> wordpress__wp_taxonomies fetched : 1
-> wordpress__CATEGORY fetched : 1
-> wordpress__TAG fetched : 0
-> wordpress__wp_users fetched : 1
-> wordpress__wp_comments fetched : 1
-> wordpress__wp_search fetched : 8
Path: /wp-json/wp/v2/themes?per_page=100&page=1
The server response was "400 Bad Request"
Inner exception message: "Missing parameter(s): status"
success source and transform nodes - 3.437s
warn Plugin `gatsby-source-filesystem` tried to define the GraphQL type `File`, which has already been defined by the plugin `null`.
warn Plugin `gatsby-source-filesystem` tried to define the GraphQL type `File`, which has already been defined by the plugin `null`.
warn Plugin `gatsby-source-filesystem` tried to define the GraphQL type `File`, which has already been defined by the plugin `null`.
success building schema - 0.864s
success createPages - 0.060s
success createPagesStatefully - 0.080s
success onPreExtractQueries - 0.003s
success update schema - 0.048s
success extract queries from components - 0.384s
success write out requires - 0.006s
success write out redirect data - 0.005s
success onPostBootstrap - 0.004s
⠀
info bootstrap finished - 9.141 s
⠀
success Building production JavaScript and CSS bundles - 9.280s
success run queries - 9.547s - 10/10 1.05/s
failed Building static HTML for pages - 0.882s
ERROR #95313
Building static HTML failed for path "/join-us"
See our docs page for more info on this error: https://gatsby.dev/debug-html
10 | const PageTemplate = ({ data }) => (
11 | <Layout>
> 12 | { renderBlocks(data.currentPage.acf.page_blocks, data) }
| ^
13 | </Layout>
14 | );
15 |
WebpackError: TypeError: Cannot read property 'page_blocks' of null
- page.js:12 PageTemplate
src/templates/page.js:12:45
The issue seems to be occurring in the output of a GraphQL query that provides me with the data object. But this doesn't happen in my local setup, and it seems like the GraphQL connection is working and fetching data earlier in the error output. If there were issues with my query or something else then why would the local version be working?
This is the file where the issue is happening:
import React from 'react';
import { graphql } from 'gatsby';
import renderBlocks from '../js/pageBlockRender';
import Layout from '../components/global/Layout';
import '../components/sass/blocks.scss';
const PageTemplate = ({ data }) => (
<Layout>
{ renderBlocks(data.currentPage.acf.page_blocks, data) }
</Layout>
);
export default PageTemplate;
export const pageQuery = graphql`
query ($id: String!) {
currentPage: wordpressPage(id: {eq: $id}) {
title
id
parent {
id
}
template
acf {
page_blocks {
block_type {
acf_fc_layout
cs_title
cs_text
dl_style
hh_background_video
tpc_thought_piece {
post_title
post_excerpt
}
}
wordpress_id
}
}
}
}
`;
I'm using the latest versions of React and React-dom, and per this post I have also tried installing all peer dependencies in node. I've also tried deleting my .cache folder to no avail.
What could be different about gatsby develop and gatsby build that creates this issue?
Could it be the differences between the environment in which the dev and production environment are?
Dev Environment
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU # 2.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.10.0 - ~/.nvm/versions/node/v11.10.0/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v11.10.0/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 79.0.3945.130
Firefox: 58.0.1
Safari: 11.1.2
npmPackages:
gatsby: ^2.19.5 => 2.19.5
gatsby-image: ^2.2.38 => 2.2.38
gatsby-plugin-react-helmet: ^3.1.18 => 3.1.18
gatsby-plugin-sass: ^2.1.26 => 2.1.26
gatsby-plugin-sharp: ^2.3.13 => 2.3.13
gatsby-plugin-styled-components: ^3.1.14 => 3.1.14
gatsby-source-wordpress: ^3.1.51 => 3.1.51
gatsby-transformer-sharp: ^2.3.12 => 2.3.12
npmGlobalPackages:
gatsby-cli: 2.8.16
Prod Environment:
System:
OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
CPU: (4) x64 Intel Xeon Processor (Skylake, IBRS)
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 11.10.0 - ~/.nvm/versions/node/v11.10.0/bin/node
npm: 6.7.0 - ~/.nvm/versions/node/v11.10.0/bin/npm
Languages:
Python: 2.7.17 - /usr/bin/python
npmPackages:
gatsby: ^2.19.5 => 2.19.5
gatsby-image: ^2.2.38 => 2.2.38
gatsby-plugin-react-helmet: ^3.1.18 => 3.1.18
gatsby-plugin-sass: ^2.1.26 => 2.1.26
gatsby-plugin-sharp: ^2.3.13 => 2.3.13
gatsby-plugin-styled-components: ^3.1.14 => 3.1.14
gatsby-source-wordpress: ^3.1.51 => 3.1.51
gatsby-transformer-sharp: ^2.3.12 => 2.3.12
npmGlobalPackages:
gatsby-cli: 2.8.27
Here is my gatsby-config.js
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.org/docs/gatsby-config/
*/
module.exports = {
siteMetadata: {
title: "{PRIVATE INFO CAN'T MAKE PUBLIC}",
description: "{PRIVATE INFO CAN'T MAKE PUBLIC}",
author: `{PRIVATE INFO CAN'T MAKE PUBLIC}`
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: `${__dirname}/src/data/`,
ignore: [`**/\.*`], // ignore files starting with a dot
},
},
'gatsby-plugin-styled-components',
/** Comment this ↓ out to connect Gatsby to the staging site **/
{
resolve: 'gatsby-source-wordpress',
options: {
excludedRoutes: ['/wp/v2/users/**', '/wp/v2/settings*'],
baseUrl: '{PRIVATE INFO CAN'T MAKE PUBLIC}/',
auth: {
htaccess_user: "{PRIVATE INFO CAN'T MAKE PUBLIC}",
htaccess_pass: "{PRIVATE INFO CAN'T MAKE PUBLIC}",
},
protocol: 'https',
hostingWPCOM: false,
useACF: true,
searchAndReplaceContentUrls: {
sourceUrl: '{PRIVATE INFO CAN'T MAKE PUBLIC}/',
replacementUrl: '',
},
},
},
`gatsby-plugin-sass`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/data/`,
},
},
],
}
Here is package.json
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"babel-plugin-styled-components": "^1.10.6",
"bootstrap": "^4.4.1",
"gatsby": "^2.19.5",
"gatsby-image": "^2.2.38",
"gatsby-plugin-react-helmet": "^3.1.18",
"gatsby-plugin-sass": "^2.1.26",
"gatsby-plugin-sharp": "^2.3.13",
"gatsby-plugin-styled-components": "^3.1.14",
"gatsby-source-wordpress": "^3.1.51",
"gatsby-transformer-sharp": "^2.3.12",
"jquery": "^3.4.1",
"node-sass": "^4.13.1",
"popper.js": "^1.16.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.1",
"sharp": "^0.24.0",
"slash": "^3.0.0",
"styled-components": "^4.4.1",
"typescript": "^3.7.5",
"utf-8-validate": "^5.0.2"
},
"devDependencies": {
"popper": "^1.0.1",
"prettier": "^1.19.1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
},
"optionalDependencies": {
"bufferutil": "^4.0.1"
}
}
Any clues?