Cannot find fragment GatsbyImageSharpSizes. Please make sure the fragment exists in ``.

[jmcmullen]

Description

I am trying to use the gatsby-image plugin but for some reason can't find the fragment when including the graphql query. I am using the Netlify starter template:
https://github.com/AustinGreen/gatsby-starter-netlify-cms

Environment

Gatsby version: 1.9.63
Node.js version: 8.9.1
Operating System: macOS High Sierra

File contents:

// gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'Gatsby + Netlify CMS Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sass',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/img`,
        name: 'images',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `static-images`,
        path: `${__dirname}/static/img/`,
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [],
      },
    },
    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
  ],
};

// GraphQL query


export const pageQuery = graphql`
  query InterviewPostByPath($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        path
        date(formatString: "MMMM DD, YYYY")
        title
        description
        featureImage
      }
    }
    headerImage: imageSharp(id: { regex: "/header/" }) {
      sizes(maxWidth: 1240) {
        ...GatsbyImageSharpSizes
      }
    }
  }
`;

Error

$ gatsby develop
success delete html files from previous builds — 0.013 s
success open and validate gatsby-config.js — 0.019 s
success copy gatsby files — 0.135 s
success onPreBootstrap — 0.059 s
success source and transform nodes — 0.203 s
success building schema — 0.567 s
success createLayouts — 0.065 s
success createPages — 0.103 s
success createPagesStatefully — 0.029 s
success onPreExtractQueries — 0.002 s
success update schema — 0.503 s
error UNHANDLED REJECTION


  Error: GraphQLCompilerContext: Cannot find fragment `GatsbyImageSharpSizes`. Please make sure the fragment   exists in ``.

  - GraphQLCompilerUserError.js:23 createUserError
    [gatsby-cms]/[relay-compiler]/lib/GraphQLCompilerUserError.js:23:10

  - GraphQLCompilerContext.js:96 GraphQLCompilerContext.getFragment
    [gatsby-cms]/[relay-compiler]/lib/GraphQLCompilerContext.js:96:13

  - filterContextForNode.js:29 Object.FragmentSpread
    [gatsby-cms]/[relay-compiler]/lib/filterContextForNode.js:29:32

  - GraphQLIRVisitor.js:32 visitIR
    [gatsby-cms]/[relay-compiler]/lib/GraphQLIRVisitor.js:32:10

  - filterContextForNode.js:36 filterContextForNode
    [gatsby-cms]/[relay-compiler]/lib/filterContextForNode.js:36:5

  - query-compiler.js:296
    [gatsby-cms]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:296:63

  - Array.forEach

  - query-compiler.js:283 Runner._callee3$
    [gatsby-cms]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:283:43


error Command failed with exit code 1.

[jmcmullen]

Wow it must be time for bed... I fixed this doing yarn add gatsby-image 😂