fix(gatsby-transformer-sharp): Warn when using unsupported extension

[LekoArts]

Description

In the past people were (non surprisingly) confused when their image query e.g. from a CMS blew up and they couldn't figure out that it was cause by a .gif file they used.

Now a warning will be shown if a .gif file is queried and childImageSharp is used. I decided against an error and for a warning as people might guard themselves against that by checking childImageSharp for being null. It'll work then. Example query that shows an error:

export const query = graphql`
  query {
    normal: file(name: {eq: "shift"}) {
      name
      childImageSharp {
        fluid {
          src
        }
      }
    }
    gif: file(name: {eq: "killing-eve"}) {
      name
      childImageSharp {
        fluid {
          src
        }
      }
      publicURL
    }
  }
`

Output:

For now it doesn't specify the line + column as that would require a lot more additional work.

Documentation

Related Issues

Fixes #18699

[pieh]

This has potential of spamming console. Do we need this warning for each instance of it?

[LekoArts]

@pieh I guess we could also collect the paths (and counts) and print out only one warning with all paths at the end, e.g. with onPostBootstrap or something?

[pieh]

Printing it for every instance might be fine. I just wanted to raise potential problems it can cause.

I wouldn't recommend using onPostBootstrap (as this will result in non-warning cases for gatsby develop (local / preview) as people change their data or queries in source code).

Ideally we would have "sessions" for each "query running" step where we dedupe warnings for same files within those, but I don't think plugins can do something like that right now.

I'll try to find "prior art" in other plugins for similar warnings and if we have any - let's follow what we already do in other plugins

[LekoArts]

Maybe we should shorten the warning (to two lines)?

[LekoArts]

@pieh shortened the message now

[wardpeet]

This is great @LekoArts! I added 1 comment

[wardpeet]

Thanks! Looks great, our users will be very happy.

[pieh]

Published [email protected]

[CanRau]

@LekoArts Is it supposed to warn for /jpe?g/ as well?
I get

warn You can't use childImageSharp together with can.jpeg — use publicURL instead. The childImageSharp
 portion of the query in this file will return null:

Yet the image shows as expected so all those warnings are pretty annoying 😢

[muescha]

jpeg is still supported in https://github.com/gatsbyjs/gatsby/pull/20782/files#diff-6ffe62631f12defe74d8bf931540b5e8R2

but i see the message is for this extension: can.jpeg``` 😕 🤔 ~~maybe there are 2 dots in your filename (/whatever.can.jpeg`)?

nevermind, the code says You can't use childImageSharp together with ${parent.name}.${parent.extension} - i was only looking at the screenshot where only You can't use childImageSharp together with .gif

[skovhus]

This caused a regression where You can't use childImageSharp together with is shown for all file types, see:

• gatsby-transformer-sharp 2.3.15 regression: You can't use childImageSharp together with #21776
• fix(gatsby-transformer-sharp) remove default export #21777

@CanRau this is probably why you see the warning for jpeg.

[CanRau]

Thanks for linking those 🙏 it's gone now 👍