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 

[axe312ger]

I run into this and now could fix the issue.

It was either one of these:

• forgot gatsby-plugin-sharphttps://github.com/gatsbyjs/gatsby/issues/15625#issuecomment-511978323
• or more likely: two static queries had the same query name

[afladmark]

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