gatsby-plugin-sharp ^2.0.0-rc.0 Uknown fragment ...GatsbyImageSharpFluid_tracedSVG

Created on 14 Sep 2018  ·  8Comments  ·  Source: gatsbyjs/gatsby

Description

I'm building a gatsby V2 site and trying to use graphql to get the fragment from childImageSharp as seen at https://next.gatsbyjs.org/packages/gatsby-image/?=image

In my terminal I get the error 

⠁ Unknown fragment "GatsbyImageSharpFluid_tracedSVG".

GraphQL request (15:24)
14:                   fluid {
15:                     ...GatsbyImageSharpFluid_tracedSVG
                           ^
16:                   }

If I switch out the fragment for src or srcSet in my query I get a response with no error. Using a different fragment doesn't fix the problem.

Adding fluid (maxWidth: 700) { doesn't fix the problem either.

Full error:

success building schema — 0.353 s
⠁ Unknown fragment "GatsbyImageSharpFluid_noBase64".

GraphQL request (16:24)
15:                     # Choose either the fragment including a small base64ed image, a traced placeholder SVG, or one without.
16:                     ...GatsbyImageSharpFluid_noBase64
                           ^
17:                   }

error gatsby-node.js returned an error


  GraphQLError: Unknown fragment "GatsbyImageSharpFluid_noBase64".

  - debuggability.js:303 Promise._execute
    [lib]/[gatsby-cli]/[bluebird]/js/release/debuggability.js:303:9

  - promise.js:483 Promise._resolveFromExecutor
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:483:18

  - promise.js:79 new Promise
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:79:10

  - index.js:300 graphqlRunner
    [bare]/[gatsby]/dist/bootstrap/index.js:300:14

  - gatsby-node.js:10 Object.exports.createPages
    /Users/tylerbarnes/Sites/bare/gatsby-node.js:10:10

  - api-runner-node.js:137 runAPI
    [bare]/[gatsby]/dist/utils/api-runner-node.js:137:37

  - api-runner-node.js:247 Promise.mapSeries.plugin
    [bare]/[gatsby]/dist/utils/api-runner-node.js:247:32

  - util.js:16 tryCatcher
    [bare]/[bluebird]/js/release/util.js:16:23

  - reduce.js:155 Object.gotValue
    [bare]/[bluebird]/js/release/reduce.js:155:18

  - reduce.js:144 Object.gotAccum
    [bare]/[bluebird]/js/release/reduce.js:144:25

  - util.js:16 Object.tryCatcher
    [bare]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [bare]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [bare]/[bluebird]/js/release/promise.js:569:18


error UNHANDLED REJECTION


  TypeError: Cannot read property 'filter' of undefined

  - api-runner-node.js:274 Promise.mapSeries.catch.then.results
    [bare]/[gatsby]/dist/utils/api-runner-node.js:274:42

  - util.js:16 tryCatcher
    [bare]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [bare]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [bare]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [bare]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [bare]/[bluebird]/js/release/promise.js:693:18

  - async.js:133 Async._drainQueue
    [bare]/[bluebird]/js/release/async.js:133:16

  - async.js:143 Async._drainQueues
    [bare]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues
    [bare]/[bluebird]/js/release/async.js:17:14

Steps to reproduce

In gratsby-node.js

   {
      allMarkdownRemark(limit: 1000) {
        edges {
          node {
            frontmatter {
              thumbnail {
                childImageSharp {
                  fluid {
                    ...GatsbyImageSharpFluid_tracedSVG
                  }
                }
              }
            }
          }
        }
      }
    }

In my component

<Img fluid={frontMatter.thumbnail.childImageSharp.fluid} />

Expected result

Gatsby-image lazyloads an image with an svg lqip and a srcset of the image.

Actual result

Fragment not found.

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.11.2 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.92
    Firefox: 62.0
    Safari: 11.1.2
  npmPackages:
    gatsby: @next => 2.0.0-rc.24 
    gatsby-image: ^2.0.0-rc.2 => 2.0.0-rc.2 
    gatsby-plugin-emotion: ^2.0.0-rc.5 => 2.0.0-rc.5 
    gatsby-plugin-google-fonts: ^0.0.4 => 0.0.4 
    gatsby-plugin-netlify: ^2.0.0-rc.0 => 2.0.0-rc.0 
    gatsby-plugin-netlify-cms: ^3.0.0-rc.0 => 3.0.0-rc.0 
    gatsby-plugin-netlify-cms-paths: ^1.0.2 => 1.0.2 
    gatsby-plugin-react-helmet: ^3.0.0-rc.0 => 3.0.0-rc.0 
    gatsby-plugin-react-svg: ^2.0.0-beta1 => 2.0.0-beta1 
    gatsby-plugin-sass: ^2.0.0-rc.0 => 2.0.0-rc.0 
    gatsby-plugin-sharp: ^2.0.0-rc.0 => 2.0.0-rc.0 
    gatsby-remark-copy-linked-files: @next => 2.0.0-rc.5 
    gatsby-remark-images: @next => 2.1.0-alpha.e328d33f 
    gatsby-source-filesystem: ^2.0.1-rc.0 => 2.0.1-rc.0 
    gatsby-transformer-remark: ^2.1.1-rc.0 => 2.1.1-rc.0 
    gatsby-transformer-sharp: ^2.1.1-rc.0 => 2.1.1-rc.0 
  npmGlobalPackages:
    gatsby-cli: 1.1.58
picture TylerBarnes

Most helpful comment

Thanks! Here's what I see:
Your graphql query lives in gatsby-node.js, and you expect to be able to access the result of that query in your page template (via pageContext). But what gets passed to pages/templates is only the path and stuff you put in context, which you can use in your page/template to retrieve the data you need.
For your project this means:

  • your query in gatsby-node.js should look something like this:
{
  allMarkdownRemark {
    edges {
      node {
        id
        fields {
          slug
        }
        frontmatter {
          templateKey
        }
      }
    }
  }
}
  • and in createPage pass on slug with
context: {
  slug: edge.node.fields.slug
}
  • in your project-post.js template you can then query for the data you need:
import { graphql } from `gatsby`
export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        thumbnail {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`;

slug is available here because we passed it to the template in createPage via context.

  • your <ProjectPost /> component can then pluck everything from props.data

Unrelated: gatsby-image does not have a named export, so make sure to import Img without curly brackets.

Btw there's a section in the gatsby tutorial on programmatically creating pages which covers pretty much all of this. Be sure to check it out!

picture stefanprobst on 15 Sep 2018
👍7 🎉1

All 8 comments

Does thumbnail point to a file? Then this should work:

{
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          title
          thumbnail {
            ... on File {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
}
stefanprobst picture stefanprobst on 14 Sep 2018

It does point to a file. ... on File works and doesn't return an error but once it gets down to the image sharp fragment it throws the same error as before.

TylerBarnes picture TylerBarnes on 14 Sep 2018

Do you have gatsby-image installed?

We have this (little weird) check before actually enabling fragments that checks for gatsby-image package:
https://github.com/gatsbyjs/gatsby/blob/4edb8da7456a0c323baf3bd3b256f2cb6e37e194/packages/gatsby-transformer-sharp/src/gatsby-node.js#L18-L35
(copying fragments to .cache is what actually enables usage of those fragments)

pieh picture pieh on 14 Sep 2018

Hmm, interesting! I do have gatsby-image installed (2.0.0-rc.2). I checked my fragments folder and it's empty so I went direct to the file you linked in my node modules and commented out those checks to see if it would build the fragments file but it still didn't.

Could there be something wrong in my gatsby-config?

I'm using netlifycms which adds the images to the /static/img/ directory. 

module.exports = {
  siteMetadata: {
    title: "Gatsby v2"
  },
  plugins: [
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `poppins\:300,400` // you can also specify font weights and styles
        ]
      }
    },
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sass",
    {
      resolve: `gatsby-plugin-emotion`
      // options: {
      //   // Accepts all options defined by `babel-plugin-emotion` plugin.
      // },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/pages`,
        name: "pages"
      }
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/static/img`,
        name: "images"
      }
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-plugin-netlify-cms-paths",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1080
            }
          }
        ]
      }
    },
    {
      resolve: "gatsby-plugin-netlify-cms",
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
        stylesPath: `${__dirname}/src/components/all.sass`
      }
    },
    "gatsby-plugin-netlify", // make sure to keep it last in the array
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        include: "/src/visuals/svg/"
      }
    }
  ]
};
TylerBarnes picture TylerBarnes on 14 Sep 2018

Could you share a repo to reproduce this?

stefanprobst picture stefanprobst on 15 Sep 2018

Sure, It's on a private gitlab repo so I copied the files to https://github.com/TylerBarnes/gatsby-image-problem

TylerBarnes picture TylerBarnes on 15 Sep 2018

Thanks! Here's what I see:
Your graphql query lives in gatsby-node.js, and you expect to be able to access the result of that query in your page template (via pageContext). But what gets passed to pages/templates is only the path and stuff you put in context, which you can use in your page/template to retrieve the data you need.
For your project this means:

  • your query in gatsby-node.js should look something like this:
{
  allMarkdownRemark {
    edges {
      node {
        id
        fields {
          slug
        }
        frontmatter {
          templateKey
        }
      }
    }
  }
}
  • and in createPage pass on slug with
context: {
  slug: edge.node.fields.slug
}
  • in your project-post.js template you can then query for the data you need:
import { graphql } from `gatsby`
export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {
        title
        thumbnail {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`;

slug is available here because we passed it to the template in createPage via context.

  • your <ProjectPost /> component can then pluck everything from props.data

Unrelated: gatsby-image does not have a named export, so make sure to import Img without curly brackets.

Btw there's a section in the gatsby tutorial on programmatically creating pages which covers pretty much all of this. Be sure to check it out!

stefanprobst picture stefanprobst on 15 Sep 2018
👍7 🎉1

Oh wow, thanks so much for the thorough response and explanation, I really appreciate it! I was reading through that tutorial again earlier today to try to figure out what I was missing but what you've written here is extremely helpful!

I made the changes and everything is working perfectly. So the idea is in gatsby-node I'm only creating pages, my query there isn't really supposed to be passing data down besides a kind of reference which I can use in my page to make a query for the specific kind of data that page needs. That makes sense to me. Thanks again! Phenomenal support.

TylerBarnes picture TylerBarnes on 16 Sep 2018
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dustinhorton picture dustinhorton  ·  3Comments
3CordGuy picture 3CordGuy  ·  3Comments
rossPatton picture rossPatton  ·  3Comments
andykais picture andykais  ·  3Comments
ferMartz picture ferMartz  ·  3Comments