gatsby-wordpress-source the thumbnail generation silently fails when gif is uploaded.

[arturhenryy]

Description

Suddenly there where images missing on the page. after some search i realized that one of the images uploaded in the wp backend was a gif. after removing it all images showed up again. the problem seems to be that during the thumbnail generation the gif throws an error and the rest of the images after the gif are not generated. but there is no hint or error message.

Expected result

either support gifs or at least throw an error that the format is not supported and retry the rest of the images after the gif

Actual result

thumbnail generation fails

Environment

  System:
    OS: macOS High Sierra 10.13.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.12.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 63.0
    Safari: 11.0.2
  npmPackages:
    gatsby: ^2.0.63 => 2.0.63
    gatsby-image: ^2.0.22 => 2.0.22
    gatsby-link: ^2.0.7 => 2.0.7
    gatsby-plugin-catch-links: ^2.0.9 => 2.0.9
    gatsby-plugin-feed: ^2.0.11 => 2.0.11
    gatsby-plugin-google-analytics: ^2.0.8 => 2.0.8
    gatsby-plugin-manifest: ^2.0.11 => 2.0.11
    gatsby-plugin-nprogress: ^2.0.7 => 2.0.7
    gatsby-plugin-offline: ^2.0.18 => 2.0.18
    gatsby-plugin-page-transitions: ^1.0.7 => 1.0.7
    gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4
    gatsby-plugin-sass: ^2.0.7 => 2.0.7
    gatsby-plugin-sharp: ^2.0.14 => 2.0.14
    gatsby-plugin-sitemap: ^2.0.3 => 2.0.3
    gatsby-plugin-styled-components: ^3.0.4 => 3.0.4
    gatsby-plugin-twitter: ^2.0.8 => 2.0.8
    gatsby-remark-autolink-headers: ^2.0.12 => 2.0.12
    gatsby-remark-copy-linked-files: ^2.0.7 => 2.0.7
    gatsby-remark-images: ^3.0.1 => 3.0.1
    gatsby-remark-prismjs: ^3.1.4 => 3.1.4
    gatsby-remark-responsive-iframe: ^2.0.7 => 2.0.7
    gatsby-source-filesystem: ^2.0.11 => 2.0.11
    gatsby-source-wordpress: ^3.0.19 => 3.0.19
    gatsby-transformer-remark: ^2.1.15 => 2.1.15
    gatsby-transformer-sharp: ^2.1.9 => 2.1.9
  npmGlobalPackages:
    gatsby-cli: 2.4.5

[sidharthachatterjee]

gatsby-wordpress-source internally uses gatsby-plugin-sharp which uses https://github.com/lovell/sharp. sharp only supports JPEG, PNG, WebP and TIFF images.

We agree that this shouldn't fail silently though and should throw a more useful error.

We'll look into this @arturhenryy Thank you for opening it.

[sidharthachatterjee]

@arturhenryy Would it be possible to link to a minimal reproduction repo? That will enable us to move on this quickly

[arturhenryy]

hi @sidharthachatterjee sorry i only have a full blown production repo which i cant make public.

[sidharthachatterjee]

@arturhenryy I understand

If you'd like, you may share it with me privately via DM (I'm @chatsidhartha on Twitter) or invite me to the repo on GitHub

[pieh]

Hey, me and @sidharthachatterjee were trying to reproduce it and get:

{
  "node": {
    "title": "Hello world!",
    "id": "2347739f-f4fa-5d13-8eac-4a0059e4ff82",
    "acf": {
      "gallery_custom_abcde": [
        {
          "slug": "200px-rotating_earth_large",
          "localFile": {
            "relativePath": ".cache/gatsby-source-filesystem/79cee5f2f6e8acb29191a56cfeea0938/200px-Rotating_earth_large.gif",
            "childImageSharp": null
          }
        },
        {
          "slug": "screenshot-2018-12-13-at-17-56-10",
          "localFile": {
            "relativePath": ".cache/gatsby-source-filesystem/1621f4b101d5817c2cc942ad4c035fdf/Screenshot-2018-12-13-at-17.56.10.png",
            "childImageSharp": {
              "fluid": {
                "base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAABPElEQVQ4y6WT3ZKDIAyFfZBdq4L8CApILW3f/73OJnTb2audai/ORMF85oTQlHPBrdyRY0ZOZ5xJf+MeXS9XNMEHXAhaIeuGlcGkFPLrJ2+JvuX8xlmHuEQCrBXG75N2yMFTtDAjSf0vy3E0lOvR8MOWN0qe4IyrG107wEqBoe3RfXdvqf+NDYPu5YbZzUhLQpwjtJS02WM4DbvVWLKVQqplK2kQnMViR5y+HsC+3QemHtraQ7ZqRo11NihRQ/b7YY8KlaERybBkPc4eXisY6t9h4LOHwS8Ic6Iqxwp6wnZbttrQuKz1hFklGdr4ADgZi+tWsLhApxywTKZaFt1hyxYrDbXsJZRQtCgxmxHyKJBt8qFwsuhEXdRCHLL7qpDnkGFc5UAxTOqDsSEgX2yeQx4h0Ul4smxHcei2/AC11rB8sFegMwAAAABJRU5ErkJggg==",
                "src": "/static/dfd312aff07ffc7667ef14f3e2c7b16d/8423c/Screenshot-2018-12-13-at-17.56.10.png",
                "sizes": "(max-width: 800px) 100vw, 800px",
                "srcSet": "/static/dfd312aff07ffc7667ef14f3e2c7b16d/8559d/Screenshot-2018-12-13-at-17.56.10.png 200w,\n/static/dfd312aff07ffc7667ef14f3e2c7b16d/78498/Screenshot-2018-12-13-at-17.56.10.png 400w,\n/static/dfd312aff07ffc7667ef14f3e2c7b16d/8423c/Screenshot-2018-12-13-at-17.56.10.png 800w,\n/static/dfd312aff07ffc7667ef14f3e2c7b16d/0a91e/Screenshot-2018-12-13-at-17.56.10.png 1200w,\n/static/dfd312aff07ffc7667ef14f3e2c7b16d/a13f1/Screenshot-2018-12-13-at-17.56.10.png 1338w"
              }
            }
          }
        }
      ]
    }
  }
}

which is correct behaviour because sharp plugins don't support GIF file (that's why childImageSharp is null). You would need to add manual handling for GIF files - for example use query like this:

{
  allWordpressPost {
    edges {
      node {
        title
        id
        acf {
          gallery_custom_abcde {
            slug
            localFile {
              # use publicURLif childImageSharp is null
              publicURL
              childImageSharp {
                fluid {
                  base64
                  src
                  sizes
                  srcSet
                }
              }
            }
          }
        }
      }
    }
  }
}

and check if childImageSharp is null and fallback to publicURL if it's not (this will essentially just copy gif file to output)

[arturhenryy]

@sidharthachatterjee hey sorry it took me a while to get back to this. the thing is that the missing following images could also be linked to this issue https://github.com/gatsbyjs/gatsby/issues/10347.
but i think we can agree that in both cases that the silent failing is a bug and there should be at least some error output regarding wrong file formats etc.

[sidharthachatterjee]

@arturhenryy I agree, we should log this. I'll write a quick patch for this once we resolve https://github.com/gatsbyjs/gatsby/issues/10347

[gatsbot[bot]]

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!

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

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!