Gatsby: warn You can't use childImageSharp together with abc.gif — use publicURL instead. The childImageSharp portion of the query in this file will return null: /src/templates/post.js

[bstrokevin]

Description

When the image is gif, it said

You can't use childImageSharp together with abc.gif — use publicURL instead. The childImageSharp portion of the query in this file will return null: /src/templates/post.js

Steps to reproduce

make sure there's gif in your feature image

Expected result

I was reading a closed ticket that , you can use localFile.publicURL. But my localFile don't have publicURL when childImageSharp is null.

Actual result

publicURL doesnt' exist. It doesn't seems like localfile was created if it's gif.

Environment

System:
OS: macOS Mojave 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.13.0 - /usr/local/bin/node
Yarn: yarn install v0.27.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 68.28s. - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 83.0.4103.116
Firefox: 76.0.1
Safari: 12.1.1
npmPackages:
gatsby: ^2.22.0 => 2.22.0
gatsby-awesome-pagination: ^0.3.6 => 0.3.6
gatsby-image: ^2.4.7 => 2.4.7
gatsby-plugin-lodash: ^3.3.1 => 3.3.1
gatsby-plugin-netlify: ^2.3.2 => 2.3.2
gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3
gatsby-plugin-purgecss: ^4.0.1 => 4.0.1
gatsby-plugin-react-helmet: ^3.3.1 => 3.3.1
gatsby-plugin-remote-images: ^2.1.0 => 2.1.0
gatsby-plugin-sass: ^2.3.1 => 2.3.1
gatsby-plugin-sharp: ^2.6.6 => 2.6.6
gatsby-remark-images: ^3.3.5 => 3.3.5
gatsby-source-filesystem: ^2.3.5 => 2.3.5
gatsby-source-wordpress: ^3.3.5 => 3.3.5
gatsby-transformer-remark: ^2.8.10 => 2.8.10
gatsby-transformer-sharp: ^2.5.2 => 2.5.2
gatsby-wordpress-reading-time: ^1.0.4 => 1.0.4
npmGlobalPackages:
gatsby-cli: 2.8.29

[graysonhicks]

@bstrokevin Do you have a link to a repo so someone can try to reproduce your exact error?

What plugin is sourcing the images? Normally not having a publicURL is due to something wrong with gatsby-source-filesystem.

See these related issues: https://github.com/angeloashmore/gatsby-source-prismic/issues/232#issuecomment-639747244 or #19935.

[connorlindsey]

This may be related to Gatsby image not handling GIFs. Working with GIFs in Gatsby gives a little more detail.

[graysonhicks]

@connorlindsey That's correct, I think the issue is that the CMS may be accepting many image types in a field so sometimes gatsby-image should work and other times (when it is a GIF) it won't.

In most cases, even when gatsby-image fails on an image, there should still be a localFile that has been saved to the filesystem, that has a publicURL field.

Depending on the plugin that is sourcing the images for @bstrokevin , or how they have gatsby-source-filesystem set up, that GIF is not being downloaded and getting a publicURL.

[bstrokevin]

I'm using gatsby-starter-wordpress and I notice it doesn't have gatsby-source-filesystem in gatsby config file.
https://github.com/GatsbyCentral/gatsby-starter-wordpress/blob/master/gatsby-config.js

I'll look into gatsby-source-filesystem. if you have the basic config for gatsby-source-filesystem, do recommend @graysonhicks

[graysonhicks]

@bstrokevin Try this:

1. npm install --save gatsby-source-filesystem
2. Add this to your plugins array in gatsby-config:

{
  resolve: 'gatsby-source-filesystem',
  options: {
    path: `${__dirname}/gatsby-config.js`,
  },
}

1. See if you now have a publicURL on the localFile

[bstrokevin]

it worked @graysonhicks ! Thanks so much. I thought it will take more to make it work with wordpress source plugin.

[graysonhicks]

@bstrokevin Great!