[gatsby-image] Image data not loading during build/develop

[eojthebrave]

Description

I'm using the gatsby-image, gatsby-plugin-sharp, and gatsby-transformer-sharp plugins to work with images imported from a Drupal backend. Up until a couple of days ago this was working fine. At some point I stopped and restarted gatsby develop and things just stopped working.

The issue is related to images imported from Drupal, and specifically, an error where props.image.localFile is undefined in my component and causes the page to not display at all. (I can add a conditional to fix that, but it doesn't resolve the fact that the image should be there.)

I'm using this query in a template component, and it always returns null for image.localFile

export const query = graphql`
  query RecipeTemplate($uuid: String!) {
    nodeRecipe(uuid: {eq: $uuid}) {
      uuid,
      title,
      cooking_time: field_cooking_time,
      difficulty: field_difficulty,
      ingredients: field_ingredients,
      preparation_time: field_preparation_time,
      number_of_servings: field_number_of_servings,
      instructions: field_recipe_instruction {
        processed,
      },
      summary: field_summary {
        processed,
      },
      relationships {
        category: field_recipe_category {
          name,
        }
        tags: field_tags {
          name,
        }
        image: field_image {
          localFile {
            childImageSharp {
              fluid(maxWidth: 1100) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`;

In GraphiQL I can run the following query, and I see the data I would expect:

{
  allNodeRecipe {
    edges {
      node {
        relationships {
          image:field_image {
            localFile {
              childImageSharp {
                fluid(maxWidth: 1100) {
                  base64,
                  aspectRatio,
                  src,
                  srcSet,
                  sizes,
                }
              }
            }
          }
        }
      }
    }
  }
}

I've tried things like removing node_modules/ and re-installing. And removing the .cache/ directory. So far that's not made any difference.

I can see that the files exist in public/static/*, and map to the paths I see when running the query in GraphiQL. Permissions on the image files seem fine.

Steps to reproduce

Here's the code I'm using: https://github.com/LullabotEducation/gatsby-drupal-examples/tree/dealing-with-images

Specifically https://github.com/eojthebrave/gatsby-drupal-examples/blob/dealing-with-images/src/templates/recipe.js, and https://github.com/eojthebrave/gatsby-drupal-examples/blob/dealing-with-images/src/components/Recipe/Recipe.js contain the failing code path.

Expected result

I would expect the <Img .../> component output in Recipe.js to display an image.

Actual result

White screen, and console shows TypeError: props.image.localFile is null

Environment

  System:
    OS: macOS 10.14.1
    CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
    Shell: 2.7.1 - /usr/local/bin/fish
  Binaries:
    Node: 11.1.0 - /usr/local/bin/node
    Yarn: 1.10.1 - ~/.yarn/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 63.0
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.19 => 2.0.19 
    gatsby-image: ^2.0.15 => 2.0.15 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5 
    gatsby-plugin-offline: ^2.0.5 => 2.0.5 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-sharp: ^2.0.7 => 2.0.7 
    gatsby-source-drupal: ^3.0.7 => 3.0.7 
    gatsby-source-filesystem: ^2.0.4 => 2.0.4 
    gatsby-transformer-sharp: ^2.1.4 => 2.1.4 
  npmGlobalPackages:
    gatsby-cli: 2.4.4

Let me know if there's any additional information I can provide or steps I can take to help trouble shoot this issue.

[mthariath]

I started seeing this issue recently as well. I'm using the Prismic headless CMS as a source, but I'm seeing the same error. What fixed it for me was deleting the image causing the issue inside the CMS and uploading the same image again, for whatever reason. I did some research and found another user that started having similar issues recently, on Spectrum.
I should add that I started getting the following error during development and when building. I didn't change anything in the code nor in my CMS - one day, these errors just started appearing, the same day I started having the issues described above. I should also add that my build times have gotten much longer recently.

11:07:08 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:08 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed 11:07:09 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:09 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed 11:07:09 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:09 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed 11:07:14 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:14 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed 11:07:15 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:15 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed 11:07:16 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:16 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed 11:07:25 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:25 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed 11:07:26 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:26 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed 11:07:35 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:37 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed 11:07:51 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:51 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed 11:07:55 AM: (sharp:1217): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject' 11:07:56 AM: (sharp:1217): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed

[eojthebrave]

I have a feeling this might be a duplicate of this bug #9834 which provides a better explanation of the problem.

[eojthebrave]

After #9835 was merged (part of #9834) I've updated the gatsby-source-drupal plugin, and am still experiencing this same problem. And, with further debugging it resembles what @mthariath is saying above. The images used to all work. And now some of them do, and some don't.

I haven't tried deleting and re-uploading the image to Drupal. But, I also shouldn't have to do that to get Gatsby working.

I've tried removing the /public and /.cache directories and running gatsby develop again and the problem occurs. Not sure if there is maybe another layer of caching in there that could effect this?

Let me know if there's any other information I can provide to help debug this further.

[dcorb]

Yes, we are experiencing the same issue with the drupal pugin. Even if this #9834 got merged, I don't have access to localFile in GraphQL schema (gatsby-transformer-sharp not been applied?). But images are found and processed (from the download point of view).

@pieh has my data source API, if it helps to debug this issue

[hanoii]

@dcorb is this still an issue for you? it seems to be working fine for me.

[dcorb]

@hanoii @pieh @eojthebrave we found the root of the problem in our case.

If you have basicAuth set up, it was not been used when fetching images. This PR we created (already merged) fixed it #10302

[damontgomery]

I'm having this issue as well. I built an example site using the default starter and this plugin early this week. I have a Drupal site set up locally (With Drupal VM) which has the jsonapi module enabled and is using the demo_umami profile.

Gatsby is version 2.0.66 if that helps.

I am not using basic auth (shield).

I wonder if this is a timeout issue with the gatsby-source-drupal plugin. That plugin already takes a few minutes each time build / develop is run. The images it can load are not random, it's the ones earlier in the JSONAPI response for the recipes and I'm assuming images as well.

I'm seeing that the first few recipes are pulled in with linked images. If I delete the cache, sometimes only the first few images are created in the cache directory and sometimes more. Since gatsby build requires all the images to work, it fails. On gatsby develop, it pulls in what in can and those pages that didn't get the localFile property don't load.

I did not use the Drupal example directly, I created it myself along the way, but it is very similar. I'm not sure how much my specific code matters because I have the same issue in GraphiQL.

[rafaelderolez]

What fixed it for me was deleting the image causing the issue inside the CMS and uploading the same image again, for whatever reason.

@mthariath this "fixed" it for me. Can confirm I started having the same problem, localFile being null.

[madeleineostoja]

Also running into this issue. Deleting and reuploading every image we have in our CMS (Prismic) isn't viable. Is there a fix in the works / do we know what the actual problem is? Seemed to just break overnight, no major version bumps or anything.

[gatsbot]

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! 💪💜

[ghost]

Also running into this issue. Please do not close the ticket. Deleting and Reuploading the image is not working nor is a good solution... Is there a fix to this problem yet?

Specifically, localFile returning null and not showing up on GraphiQL

Environment

gatsby: 2.0.88
gatsby-image: 2.0.29
gatsby-plugin-sharp: 2.0.20
gatsby-transformer-sharp: 2.1.13

[bangarangler]

Seconded. Same problems as above with gatsby I'm having to skip the gatsby-image plugin altogether. I can't get it to work on multiple files. it's a real bummer. same errors as above although with contentful. I even get the error trying to query via file{relativepath: {eq "pathnane" ..... there is def an issue. would love to have it resolved. I can't figure it out

[Kinark]

Exact same issue here, but I'm using NetlifyCMS. It seems to happen randomly. Sometimes messing around with the plugins order fixes the issue temporarly, sometimes it doesn't.

[wardpeet]

Hi!

Can anyone provide us with a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[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! 💪💜

[github-actions]

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.
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 again for being part of the Gatsby community! 💪💜

[MoinShaikhSquare]

warn [gatsby-plugin-image] No data found for image

[kaushalyap]

@MoinShaikhSquare Experiencing the same, did you managed to fix it ?

[juliobarbagallo]

Hello team and everyone here, I just came here while I was following the Tutorial from the Gatby's home page, on Part 3 using
On the terminaI, using gatsby develop got this:
` ERROR

The file loaded from https://pbs.twimg.com/media/E1oMV3QVgAIr1NT?format=jpg&name=large is not a valid image type.
Found "application/octet-stream"`

On the browser don't have errors, but 2 warnings:
static-image.server.tsx:51 No data found for image "https://pbs.twimg.com/media/E1oMV3QVgAIr1NT?format=jpg&name=large" Image not loaded https://pbs.twimg.com/media/E1oMV3QVgAIr1NT?format=jpg&name=large

The code is exactly the one from the Gatsby's tutorial page.
<Layout pageTitle="Home Page"> <p>I'm making this by following the Gatsby Tutorial.</p> <StaticImage alt="Clifford, a reddish-brown pitbull, posing on a couch and looking stoically at the camera" src="https://pbs.twimg.com/media/E1oMV3QVgAIr1NT?format=jpg&name=large" /> </Layout>

I tried removing node_modules, cleaning the cache and also with another image from unsplash and the same.

[IvanNavy93]

I have same issue, anybody found any solution?

[mthariath]

Your solution for this problem, as facetious as it seems, is to stop using Gatsby. Check out NextJS or Remix, they have all of the same features, and more. Using Gatsby for multiple client websites has been the bane of my existence. COUNTLESS hours lost trying to figure out the very same issues you're having., while looking like a fool and losing business.

It's a useless library/framework at this point, serves no purpose but to waste your time and make you look stupid to your clients. Notice how this issue has been happening for 3+ years. They don't care.