Gatsby: [v2] gatsby develop works, gatsby build fails

[dimackenzie]

Description

My site builds and displays all data correctly when I run gatsby develop, but when I build for production with gatsby build I get the following error:

error Building static HTML for pages failed

   8 |
   9 | const Layout = ({ data, children }) => {
> 10 |   const headerData = data.prismicMainNavigation.data.nav;
     |                           ^
  11 |   const footerData = data.prismicFooter.data;
  12 |   return (
  13 |     <React.Fragment>


  WebpackError: TypeError: Cannot read property 'prismicMainNavigation' of undefined

Steps to reproduce

Execute the command gatsby build on this repo.

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.3 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 61.0.2
    Safari: 11.1.2
  npmPackages:
    gatsby: next => 2.0.0-rc.4
    gatsby-plugin-catch-links: next => 2.0.2-rc.1
    gatsby-plugin-lodash: next => 3.0.1-rc.1
    gatsby-plugin-manifest: next => 2.0.2-rc.1
    gatsby-plugin-netlify: next => 2.0.0-rc.1
    gatsby-plugin-offline: next => 2.0.0-rc.1
    gatsby-plugin-react-helmet: next => 3.0.0-rc.1
    gatsby-plugin-sitemap: next => 2.0.0-rc.1
    gatsby-plugin-styled-components: next => 3.0.0-rc.1
    gatsby-plugin-typography: next => 2.2.0-rc.2
    gatsby-source-prismic: next => 2.0.0-alpha.3
  npmGlobalPackages:
    gatsby-cli: 1.1.58

[LekoArts]

I first wanted to ask if you also set your ENV variable for production but you directly store your API key in gatsby-config. You shouldn’t store it in plain text! Use ENV variables and delete/re-create your repo or clean your commits.

[dimackenzie]

This is a test repo with fake data and a fake instance of the CMS so wasn't too worried about it, but I went ahead and updated it anyways. Love your gatsby starters!

[KyleAMathews]

@dimackenzie can you build a site that reproduces the error that we could look at?

[dimackenzie]

@KyleAMathews Does the repo I linked to not reproduce the error for you? Or are you looking for something different?

[LekoArts]

This is a test repo with fake data and a fake instance of the CMS so wasn't too worried about it,

You should have said that 😜 If you want others to have a working reproduction repo you need to include a key of course. I assumed this is your live project as you didn’t mention anything

[KyleAMathews]

Ah sorry, didn't see the link to the repo.

[nodox]

@KyleAMathews can confirm the link he posted above to his example repo does have the same error.

Stack trace:

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

   9 | const Layout = ({ data, children }) => {
  10 |   console.log('nodox: ', data);
> 11 |   const headerData = data.prismicMainNavigation.data.nav;
     |                           ^
  12 |   const footerData = data.prismicFooter.data;
  13 |   return (
  14 |     <React.Fragment>


  WebpackError: TypeError: Cannot read property 'prismicMainNavigation' of undefined

  - Layout.js:11 Layout
    lib/src/components/Layout.js:11:27

  - bootstrap:15 d
    lib/webpack/bootstrap:15:1


  - bootstrap:22 a.render
    lib/webpack/bootstrap:22:1

  - bootstrap:21 a.read
    lib/webpack/bootstrap:21:1

  - bootstrap:32 renderToString
    lib/webpack/bootstrap:32:1

  - static-entry.js:180 Module../.cache/static-entry.js.__webpack_exports__.default.React.Component [as default]
    lib/.cache/static-entry.js:180:16

  - bootstrap:24 Promise
    lib/webpack/bootstrap:24:1


  - gatsby-browser-entry.js:22 Promise._resolveFromExecutor
    lib/.cache/gatsby-browser-entry.js:22:23

  - bootstrap:68 new Promise
    lib/webpack/bootstrap:68:1


  - bootstrap:5 tryCatcher
    lib/webpack/bootstrap:5:1

  - bootstrap:50 MappingPromiseArray._promiseFulfilled
    lib/webpack/bootstrap:50:1

  - api-runner-ssr.js:6 MappingPromiseArray.PromiseArray._iterate
    lib/.cache/api-runner-ssr.js:6:27

  - bootstrap:67 MappingPromiseArray.init
    lib/webpack/bootstrap:67:1

[KyleAMathews]

@dimackenzie some basic things to try — try your queries in graphiql. Try adding a console.log(data) in the affected component.

[dimackenzie]

@KyleAMathews I've done both of those suggestions. All queries work correctly in graphiql and all of the data is coming through to the affected component correctly, (as far as I can tell).

[KyleAMathews]

@dimackenzie data doesn't get passed automatically into components. You need to pass it in yourself from the page components or since it looks like Layout.js needs the same data site wide, use StaticQuery https://next.gatsbyjs.org/docs/static-query/