Image-sharp silently fails to process animated gifs

[grantglidewell]

Description

If I have an animated gif in my content, image-sharp or transformer sharp does not throw any error, does not notify in any way that the image could not/has not been processed.

Steps to reproduce

Use an animated gif in content from your cms, see that childImageSharp is null

Expected result

An error should be displayed when the image is not processed.

Actual result

No error, just null data

Environment

System:
OS: macOS 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.15.2 - /usr/local/bin/node
Yarn: 1.17.3 - ~/.yarn/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 77.0.3865.120
Firefox: 69.0.2
Safari: 13.0.1
npmPackages:
gatsby: ^2.15.19 => 2.15.19
gatsby-image: ^2.2.20 => 2.2.20
gatsby-plugin-emotion: ^4.1.7 => 4.1.7
gatsby-plugin-feed: ^2.3.13 => 2.3.13
gatsby-plugin-fixhash: ^0.0.4 => 0.0.4
gatsby-plugin-google-analytics: ^2.1.17 => 2.1.17
gatsby-plugin-google-tagmanager: ^2.1.10 => 2.1.10
gatsby-plugin-manifest: ^2.2.18 => 2.2.18
gatsby-plugin-netlify: ^2.1.15 => 2.1.15
gatsby-plugin-netlify-cache: ^1.2.0 => 1.2.0
gatsby-plugin-offline: ^3.0.8 => 3.0.8
gatsby-plugin-react-axe: ^0.2.2 => 0.2.2
gatsby-plugin-react-helmet: ^3.1.8 => 3.1.8
gatsby-plugin-sharp: ^2.2.25 => 2.2.25
gatsby-plugin-sitemap: ^2.2.14 => 2.2.14
gatsby-source-drupal: ^3.2.30 => 3.2.30
gatsby-source-filesystem: ^2.1.25 => 2.1.25
gatsby-transformer-sharp: ^2.2.16 => 2.2.16
npmGlobalPackages:
gatsby-cli: 2.5.12

[LekoArts]

We'd be happy to receive a PR adding a clearer error message when that happens.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[LekoArts]

Let's try to improve that.

[sjku1]

Hi @LekoArts

I was looking into how to address this, but wasn't sure where to implement the error message.

As I understand, after having added a gif to one's cms, gatsby-transformer-sharp will try to create a childImageSharp node to be accessed by the component that contains the query for the gif. From there, gatsby-image will try to display the gif, but will read a value of null.

Should the error be displayed by gatsby-transformer-sharp after it attempts to query the file or by gatsby-image?

[wardpeet]

Hey @sjku1,

Could you maybe setup a small reproduction on a local gatsby site? Or does this only happen when using something like Contentful? I'm happy to give you pointers on how to fix this when I can reproduce it. I think we should fix this in transformer-sharp but the error probably needs to be thrown from gatsby-plugin-sharp.

I'm sorry if this doesn't make much sense but I'll do a proper explanation when a repro is given

[caseyjkey]

I am also querying gif images and get a null object for ChildImageSharp. Any fixes for this?

[jonniebigodes]

@caseykey sorry to be the bearer of bad news, but to the best of my knowledge at this stage you'll still need to use a standard html img tag and import the file directly.

[caseyjkey]

@jonniebigodes I found this workaround

[darmentrout]

Neither static nor animated GIFs are working in my instance.

[pieh]

We added warning about gifs (so it doesn't silentely fail) in gatsby-transformer-sharp@2.3.16 - so it doesn't really change the output, but at least give information about this

[wesbos]

So are we supposed to have two tags now - gatsby-image for most, and a regular img tag for gifs?

[LekoArts]

@wesbos Unfortunately .gif was never supported by the underlying sharp library. They track the support for this here: lovell/sharp#1372

Hence this issue was solely about this failing silently in our transformer. It tripped up a lot of folks who had .gif in their CMS (e.g. a default image) and their build crashed with that. So it never worked and you always had to use two tags.

But I understand the frustration of course, so we should ask Lovell how soon this could be merged and be available with our current setup :) In the meantime we could iterate on this warning and not show it when you have publicURL defined - will open an issue for that.

[polarathene]

Just wanted to point out that sharp has recently merged support for gif (and animated webp), it'll be available in the next 0.26 release. I created a issue regarding adding the support for gatsby here.