Search code examples
gatsbynetlify

Gatbsy error 'Page data from page-data.json for the failed page "/"' only with Netlify

My site compiles (both develop and build) on my local machine absolutely fine, but I get the following error when I try to build on Netlify. It looks like it is having trouble with the GraphQL query I have in my homepage - it appears to be returning with a null value, only on Netlify.

Here's the error:

8:24:21 AM: error Page data from page-data.json for the failed page "/": {
8:24:21 AM:   "componentChunkName": "component---src-pages-index-js",
8:24:21 AM:   "path": "/",
8:24:21 AM:   "result": {
8:24:21 AM:     "data": {
8:24:21 AM:       "mdx": null
8:24:21 AM:     },
8:24:21 AM:     "pageContext": {}
8:24:21 AM:   },
8:24:21 AM:   "staticQueryHashes": [
8:24:21 AM:     "2577492939",
8:24:21 AM:     "3477169923"
8:24:21 AM:   ]
8:24:21 AM: }
8:24:21 AM: failed Building static HTML for pages - 3.841s
8:24:21 AM: error Building static HTML failed for path "/"
8:24:21 AM: 
8:24:21 AM:   17 |             <StaticImage src="../img/logobig.jpg" className="rounded float-right" alt="WaJK Logo"/>
8:24:21 AM:   18 |             <MDXRenderer>
8:24:21 AM: > 19 |               {data.mdx.body}
8:24:21 AM:      |                         ^
8:24:21 AM:   20 |             </MDXRenderer>
8:24:21 AM: Creating deploy upload records
8:24:21 AM:   21 |             <p>
8:24:21 AM:   22 |               <Link className="btn btn-primary btn-lg" to={"/" + data.mdx.frontmatter.button_link}>{data.mdx.frontmatter.button_text} &raquo;</Link>
8:24:21 AM: 
8:24:21 AM:   WebpackError: TypeError: Cannot read properties of null (reading 'body')
8:24:21 AM:   
8:24:21 AM:   - index.js:19 
8:24:22 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
8:24:21 AM:     we-are-just-kids/src/pages/index.js:19:25
8:24:21 AM:   
8:24:21 AM:   - objectWithoutProperties.js:4 
8:24:21 AM:     [we-are-just-kids]/[@babel]/runtime/helpers/objectWithoutProperties.js:4:1
8:24:21 AM:   
8:24:21 AM:   - extends.js:15 
8:24:21 AM:     [we-are-just-kids]/[@babel]/runtime/helpers/extends.js:15:1
8:24:21 AM:   
8:24:21 AM:   - objectWithoutProperties.js:13 
8:24:21 AM:     [we-are-just-kids]/[@babel]/runtime/helpers/objectWithoutProperties.js:13:1
8:24:21 AM:   
8:24:21 AM:   - objectWithoutProperties.js:12 
8:24:21 AM:     [we-are-just-kids]/[@babel]/runtime/helpers/objectWithoutProperties.js:12:1
8:24:21 AM:   
8:24:21 AM:   - inheritsLoose.js:7 
8:24:21 AM:     [we-are-just-kids]/[@babel]/runtime/helpers/inheritsLoose.js:7:1
8:24:21 AM:   
8:24:21 AM:   - static-entry.js:294 
8:24:21 AM:     we-are-just-kids/.cache/static-entry.js:294:22
8:24:21 AM:   
8:24:21 AM:   - index.js:9 
8:24:21 AM:     we-are-just-kids/src/pages/index.js:9:7
8:24:21 AM:   
8:24:21 AM: 
8:24:21 AM: ​
8:24:21 AM: ────────────────────────────────────────────────────────────────
8:24:21 AM:   "build.command" failed                                        
8:24:21 AM: ────────────────────────────────────────────────────────────────
8:24:21 AM: ​
8:24:21 AM:   Error message
8:24:21 AM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
8:24:21 AM: ​
8:24:21 AM:   Error location
8:24:21 AM:   In Build command from Netlify app:
8:24:21 AM:   npm run build
8:24:21 AM: ​
8:24:21 AM:   Resolved config
8:24:21 AM:   build:
8:24:21 AM:     command: npm run build
8:24:21 AM:     commandOrigin: ui
8:24:21 AM:     publish: /opt/build/repo/public
8:24:21 AM:     publishOrigin: ui

And FWIW, here is the GraphQL query in index.js:

export const query = graphql`
query {
  mdx(id: {eq: "b888df33-9710-5d1e-80f8-fe07467c2742"}) {
    id
    body
    frontmatter {
      button_link
      button_text
      left_box {
        title
        text
        button_text
        button_link
      }
      middle_box {
        button_link
        button_text
        text
        title
      }
      right_box {
        title
        text
        button_text
        button_link
      }
    }
  }
}
`
Solution

  • You can bypass the build issue by adding a the optional chaining operator (?) like:

    <MDXRenderer>
  {data?.mdx?.body}
</MDXRenderer>

    However, despite this will only render body if mdx and data exists, hence will bypass Netlify build I think the issue can start on your filter-hashed GraphQL at:

    mdx(id: {eq: "b888df33-9710-5d1e-80f8-fe07467c2742"})

    So, you won't be displaying anything on your production page if the query isn't returning any data. The b888df33-9710-5d1e-80f8-fe07467c2742 id is valid on your local machine but maybe it's not on Netlify, returning void data.

    If with the previous fix your production is not displaying anything, try changing the filter to another known hardcoded value (like the slug maybe?) or try comparing the Node versions between environments (local vs Netlify). If there's a mismatch between them, can be the source of the mismatching id because there will be different build dependencies. In that case, try setting a fixed Node version using the .nvmrc file in the root of the project.

    You can create automatically with:

    node -v > .nvmrc

    The command above will create a .nvmrc file containing the Node version (node -v) from your local machine. When Netlify finds it in the build process, it will be used as a base Node version for your dependencies.