Gatsby: Building static HTML for pages failed. HELP!!!

[iTonyYo]

It's working when gatsby develop.

But when gatsby build,

WebpackError: Cannot read property 'childImageSharp' of undefined.

if,

then,

Graphql Query,

export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        title
        subtitle
        copyright
        menu {
          label
          path
        }
        author {
          name
          email
          telegram
          twitter
          github
          rss
          vk
        }
      }
    }
    allMarkdownRemark(
        limit: 1000,
        filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true } } },
        sort: { order: DESC, fields: [frontmatter___date] }
      ){
      edges {
        node {
          fields {
            slug
            categorySlug
          }

          frontmatter {
            title
            date
            category
            description
            coverImage {
              childImageSharp {
                responsiveSizes(maxWidth: 400) {
                  src
                  srcSet
                  sizes
                }
              }
            }
          }
        }
      }
    }
  }
`;

Dependencies,

{
  "dependencies": {
    "bluebird": "^3.5.1",
    "classnames": "^2.2.6",
    "gatsby": "^1.9.164",
    "gatsby-link": "^1.6.34",
    "gatsby-plugin-catch-links": "^1.0.14",
    "gatsby-plugin-feed": "^1.3.15",
    "gatsby-plugin-google-analytics": "^1.0.15",
    "gatsby-plugin-google-fonts": "latest",
    "gatsby-plugin-offline": "^1.0.12",
    "gatsby-plugin-postcss-sass": "^1.0.15",
    "gatsby-plugin-react-helmet": "^2.0.3",
    "gatsby-plugin-sharp": "^1.6.25",
    "gatsby-plugin-sitemap": "^1.2.10",
    "gatsby-remark-copy-linked-files": "^1.5.25",
    "gatsby-remark-images": "^1.5.37",
    "gatsby-remark-prismjs": "^2.0.5",
    "gatsby-remark-responsive-iframe": "^1.4.16",
    "gatsby-remark-smartypants": "^1.4.10",
    "gatsby-source-filesystem": "^1.5.11",
    "gatsby-transformer-remark": "^1.7.28",
    "gatsby-transformer-sharp": "^1.6.16",
    "lodash": "^4.17.10",
    "prismjs": "^1.15.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-disqus-comments": "^1.1.1",
    "react-helmet": "^5.2.0",
    "react-measure": "^2.1.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^5.4.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
    "gh-pages": "^1.1.0",
    "lost": "^8.2.0",
    "postcss-pxtorem": "^4.0.1",
    "prettier": "^1.10.2"
  }
}

• node v8.11.4

[LuisLoureiro]

@iTonyYo did you check the GraphiQL (http://localhost:8000/___graphql) to see if the query is ok?
When you run gatsby develop and access the page where the query is did you see any error in the console?

[iTonyYo]

There's no error in the console.

And, the page can be displayed normally.

@LuisLoureiro

[tryzniak]

Is it possible have a reproduction repo of the issue?

[Chuloo]

Seems related to #7597, would be great to have a minimal reproduction of the error @iTonyYo. 🙏

[iTonyYo]

Thre 💥reproduction repo 💥 is here.

System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Safari: 11.1.1
  npmPackages:
    gatsby: ^1.9.277 => 1.9.277
    gatsby-link: ^1.6.46 => 1.6.46
    gatsby-plugin-catch-links: ^1.0.24 => 1.0.24
    gatsby-plugin-feed: ^1.3.25 => 1.3.25
    gatsby-plugin-google-analytics: ^1.0.31 => 1.0.31
    gatsby-plugin-google-fonts: latest => 0.0.4
    gatsby-plugin-offline: ^1.0.18 => 1.0.18
    gatsby-plugin-postcss-sass: ^1.0.22 => 1.0.22
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48
    gatsby-plugin-sitemap: ^1.2.25 => 1.2.25
    gatsby-remark-copy-linked-files: ^1.5.37 => 1.5.37
    gatsby-remark-images: ^1.5.67 => 1.5.67
    gatsby-remark-prismjs: ^2.0.5 => 2.0.5
    gatsby-remark-responsive-iframe: ^1.4.20 => 1.4.20
    gatsby-remark-smartypants: ^1.4.12 => 1.4.12
    gatsby-source-filesystem: ^1.5.39 => 1.5.39
    gatsby-transformer-remark: ^1.7.44 => 1.7.44
    gatsby-transformer-sharp: ^1.6.27 => 1.6.27
  npmGlobalPackages:
    gatsby-cli: 1.1.58

@tryzniak @Chuloo

[iTonyYo]

Maybe I found the problem. Many web pages using coverImage.ChildImageSharp. But only one page defines coverImage. I mean graphql query.

@tryzniak @Chuloo @LuisLoureiro

[iTonyYo]

My problem has been solved. Successfully performed gatsby build. 😃

@tryzniak @Chuloo @LuisLoureiro