gatsby: Gatsby Image - Unknown fragment ...

Description

This morning I navigated to a Gatsby project of mine which has been in production for a year, fully functional. I launch a gatsby develop command and I’m getting an Unknown fragment "GatsbyImageSharpFluid_noBase64" error even though it worked for months and I haven’t changed anything…

I’ve tried reinstalling all my dependencies, double checked everything, searched for help online but this issue really puzzles me as, and I can’t stress this enough, nothing has changed since the last time it worked as expected.

I’ve checked the changelogs of the related packages (which I haven’t updated, but I checked anyway) but no mentions as to why this would happen. Nobody seems to be experiencing the issue (or I couldn’t find reports like mine).

What I’ve tried:

  • Deleted node_modules, yarn.lock & .cache files & directories, reinstalled everything normally (ie yarn install)
  • Tried against different branches of the project, all of which were building fine just yesterday and I’m getting this issue on all of them
  • Checked #15625, #16142 and other somewhat related reports elsewhere which didn’t help
  • Updating all my dependencies
  • Removing the GatsbyImageSharpFluid_noBase64 from the query below, which allows me to build the site just fine but, as you’d expect, I’m relying on this fragment so it’s far from ideal

What’s really strange:

  • I haven’t changed anything on the project nor the environment since it was working
  • All my latest changes do not directly have anything to do with this part of the site
  • I haven’t installed new Gatsby plugins or anything

I appreciate the fact that this report is somewhat strange, but I’m here looking for guidance or ideas as to why this could possibly happen and I’ll investigate. Hopefully I’m just missing something super obvious someone will pick up.

The failing query

fragment transform_transparent on File {
	childImageSharp {
		sqip(numberOfPrimitives: 12, blur: 5, width: 316) {
			dataURI
		}
		fluid(maxHeight: 316, maxWidth: 316, quality: 85, toFormat: PNG) {
			...GatsbyImageSharpFluid_noBase64
		}
	}
}

The above custom fragment is the one reported to fail, however I use the GatsbyImageSharpFluid_noBase64 fragment elsewhere and that doesn’t seem to cause an issue.

The images I apply this fragment on come from Prismic.io using the gatsby-source-prismic plugin.

Current workaround

I can build and use the site as expected if I drop the dependency to the incriminated fragment (GatsbyImageSharpFluid_noBase64) and replacing it with GatsbyImageSharpFluid_tracedSVG. I’ve tried using GatsbyImageSharpFluid too, but I’m getting the same error “unknown fragment”.

Environment

  System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-5287U CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.19.1 - ~/.nvm/versions/node/v12.13.0/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 71.0
    Safari: 13.0.4
  npmPackages:
    gatsby: ^2.18.17 => 2.19.8 
    gatsby-image: ^2.2.37 => 2.2.39 
    gatsby-link: ^2.2.27 => 2.2.28 
    gatsby-plugin-gtag: ^1.0.12 => 1.0.12 
    gatsby-plugin-mailchimp: ^5.1.2 => 5.1.2 
    gatsby-plugin-manifest: ^2.2.34 => 2.2.39 
    gatsby-plugin-offline: ^3.0.30 => 3.0.32 
    gatsby-plugin-react-helmet: ^3.1.18 => 3.1.21 
    gatsby-plugin-react-helmet-canonical-urls: ^1.4.0 => 1.4.0 
    gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0 
    gatsby-plugin-remove-trailing-slashes: ^2.1.17 => 2.1.20 
    gatsby-plugin-sass: ^2.1.26 => 2.1.27 
    gatsby-plugin-sharp: ^2.3.10 => 2.4.3 
    gatsby-plugin-sitemap: ^2.2.24 => 2.2.26 
    gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5 
    gatsby-source-filesystem: ^2.1.43 => 2.1.46 
    gatsby-source-prismic: ^2.2.0 => 2.2.0 
    gatsby-transformer-remark: ^2.6.45 => 2.6.48 
    gatsby-transformer-sharp: ^2.3.9 => 2.3.13 
    gatsby-transformer-sqip: 2.1.55 => 2.1.55 

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 8
  • Comments: 32 (10 by maintainers)

Most upvoted comments

I run into this and now could fix the issue.

It was either one of these:

I solved this issue by ensuring all GraphQL query name is unique.

I was having two exactly same query in different files and I was getting this (Issue description) error

        query blogListQuery {
  allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}, filter: {frontmatter: {template: {eq: "blog-post"}}}) {
    edges {
      node {
...

I renamed second query for e.g. to

        query blogListQuery88888 {
  allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}, filter: {frontmatter: {template: {eq: "blog-post"}}}) {
    edges {
      node {
...

And the issue is solved for me.

Also confirmed. Everything is building fine again. Thank you very much for the fix!

Thank you so much for quickly attacking this! I can 100% confirm that gatsby@2.19.11 fixed my issue.

Hopefully fixed 😅 At least should be fixed for the original issue description (as I was able to test on this repo).

But if someone encounters a similar error, please open a new issue with your details (and ideally - reproduction)

The bug was in fragment cycle detection (in an edge case when the same fragment was referenced multiple times within one query and then also referenced in another query).

The caveat though is that the error was reported on the next fragment usage in another query (sometimes seemingly innocent). That’s why it was so hard to reproduce.

#21128 should fix it (hopefully)

@Coriou thanks a lot for repro access!

@sidharthachatterjee I can confirm that the fix published in gatsby@2.19.11-issue-20984 works for me. The site builds just fine with the code I posted previously as is.

Thank you team for such a quick response and resolution !