Gatsby: GraphQL, allFile or file queries that work in gatsby develop don't work in gatsby serve

Created on 28 Feb 2019  ·  16Comments  ·  Source: gatsbyjs/gatsby

EDIT

What I see is that what is not working are the queries that look for files (allFile and file queries), while they work when under gatsby develop they don't retrieve the content when under gatsby build => serve.

So what does it mean? allFile and file are sort-of forbidden queries? Or have I to modify them somethow?

Summary

While in develop everything works, in serve the images are not showing up

Relevant information

I'm using gatsby-images, where I have access to images through graphQL, and then try to insert a simple <Img /> that works when developing, but not when serving. Don't know what can happen, I post below everything that might be relevant

Relevant code

in a page

<Img fluid={images[1].node.childImageSharp.fluid} />

where images comes from

const images = data.AllPostImages.edges

with 

export const blogListQuery = graphql`
  query {
    AllPostImages: allFile(filter: { extension: { eq: "jpg" } }) {
      edges {
        node {
          name
          childImageSharp {
            fluid(maxWidth: 1000) {
              originalName
              src
              srcSet
              aspectRatio
              sizes
            }
          }
        }
      }
    }
  }
`

When in developing, in Chrome

<div class=" gatsby-image-wrapper" style="position: relative; overflow: hidden;">
<div style="width: 100%; padding-bottom: 133.333%;"></div>

<picture>
<source 
srcset="/static/94a22e88a6c9752d10934873df16b1f5/788f9/name.jpg 250w,
/static/94a22e88a6c9752d10934873df16b1f5/06f71/name.jpg 500w,
/static/94a22e88a6c9752d10934873df16b1f5/1a92f/name.jpg 1000w,
/static/94a22e88a6c9752d10934873df16b1f5/686ef/name.jpg 1500w,
/static/94a22e88a6c9752d10934873df16b1f5/fe260/name.jpg 2000w,
/static/94a22e88a6c9752d10934873df16b1f5/6f375/name.jpg 2736w" 
sizes="(max-width: 1000px) 100vw, 1000px">
<img 
src="/static/94a22e88a6c9752d10934873df16b1f5/1a92f/name.jpg" 
style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: none 0s ease 0s;">
</picture>

<noscript>
<picture>
<source 
srcSet="/static/94a22e88a6c9752d10934873df16b1f5/788f9/name.jpg 250w,
/static/94a22e88a6c9752d10934873df16b1f5/06f71/name.jpg 500w,
/static/94a22e88a6c9752d10934873df16b1f5/1a92f/name.jpg 1000w,
/static/94a22e88a6c9752d10934873df16b1f5/686ef/name.jpg 1500w,
/static/94a22e88a6c9752d10934873df16b1f5/fe260/name.jpg 2000w,
/static/94a22e88a6c9752d10934873df16b1f5/6f375/name.jpg 2736w" 
sizes="(max-width: 1000px) 100vw, 1000px" />
<img src="/static/94a22e88a6c9752d10934873df16b1f5/1a92f/name.jpg"
style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/>
</picture>
</noscript>
</div>

And when in (building &) serving, in Chrome

<div class=" gatsby-image-wrapper" style="position:relative;overflow:hidden">
<div style="width:100%;padding-bottom:133.33333333333334%"></div>

<noscript>
<picture>
<source 
srcSet="/static/94a22e88a6c9752d10934873df16b1f5/788f9/name.jpg 250w,
/static/94a22e88a6c9752d10934873df16b1f5/06f71/name.jpg 500w,
/static/94a22e88a6c9752d10934873df16b1f5/1a92f/name.jpg 1000w,
/static/94a22e88a6c9752d10934873df16b1f5/686ef/name.jpg 1500w,
/static/94a22e88a6c9752d10934873df16b1f5/fe260/name.jpg 2000w,
/static/94a22e88a6c9752d10934873df16b1f5/6f375/name.jpg 2736w" 
sizes="(max-width: 1000px) 100vw, 1000px" />
<img src="/static/94a22e88a6c9752d10934873df16b1f5/1a92f/tecnica_latte_art_corazon.jpg" 
style="position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:0.5s;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center"/>
</picture>
</noscript>
</div>

while I can phisically find in the explorer e.g. /public/static/94a22e88a6c9752d10934873df16b1f5/788f9/name.jpg

package.json

  "dependencies": {
    "esm": "^3.2.5",
    "gatsby": "^2.1.4",
    "gatsby-image": "^2.0.29",
    "gatsby-plugin-google-analytics": "^2.0.14",
    "gatsby-plugin-manifest": "^2.0.17",
    "gatsby-plugin-offline": "^2.0.23",
    "gatsby-plugin-react-helmet": "^3.0.6",
    "gatsby-plugin-sharp": "^2.0.20",
    "gatsby-plugin-styled-components": "^3.0.5",
    "gatsby-source-filesystem": "^2.0.20",
    "gatsby-source-graphql": "^2.0.10",
    "gatsby-transformer-sharp": "^2.1.13",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "react-helmet": "^5.2.0",
    "react-share": "^2.4.0",
    "rehype-raw": "^4.0.0",
    "rehype-stringify": "^5.0.0",
    "remark-bracketed-spans": "^3.0.0",
    "remark-extract-frontmatter": "^2.0.0",
    "remark-frontmatter": "^1.3.1",
    "remark-parse": "^6.0.3",
    "remark-parse-yaml": "0.0.2",
    "remark-rehype": "^4.0.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.85.0",
    "styled-components": "^4.1.3",
    "unified": "^7.1.0"
  },
picture kuworking

Most helpful comment

@leworking i've picked up on your issue.
I've tried to reproduce it and breaking into smaller steps:

  • Created a new Gatsby website based on a starter.
  • Added the dependencies and configured them as i could, based on the information at hand.
    Transforming my gatsby-config.js into the following:
module.exports = {
    siteMetadata: {
      title: 'Gatsby missing images',
    },
    plugins: [
      {
        resolve: 'gatsby-source-filesystem',
        options: {
          name: 'images',
          path: `${__dirname}/src/assets/images`,
        },
      },
      'gatsby-plugin-sharp',
      'gatsby-transformer-sharp',
     /*  'gatsby-plugin-offline', */
    ],
  }
  • Copied over some images i had laying around to emulate the folder structure. Transforming it into:
    files_missing_structure
  • Modified the src/pages\index.js to reflect your issue, transforming it into:
import React from 'react';
import { graphql } from 'gatsby';
import Img from "gatsby-image"
const Index=({data})=>{
    const images = data.AllPostImages.edges
    console.log('====================================');
    console.log(`images:${JSON.stringify(images,null,2)} and pos 1=>${JSON.stringify(images[1].node.childImageSharp.fluid,null,2)}`);
    console.log('====================================');
    return (<div>
        <h1>Position 1</h1>
        <Img fluid={images[1].node.childImageSharp.fluid}/>
    </div>)

}

export const blogListQuery = graphql`
  query {
    AllPostImages: allFile(filter: { extension: { eq: "jpg" } }) {
      edges {
        node {
          name
          childImageSharp {
            fluid(maxWidth: 1000) {
              originalName
              src
              srcSet
              aspectRatio
              sizes
            }
          }
        }
      }
    }
  }
`

export default Index
  • Issuing gatsby build && gatsby serve resulted in the following:
    The console.log output:
images:[
  {
    "node": {
      "name": "wallpaper-155475",
      "childImageSharp": {
        "fluid": {
          "originalName": "wallpaper-155475.jpg",
          "src": "/static/91eaa3facc9e8d623dfe8af408c76bb5/2dec6/wallpaper-155475.jpg",
          "srcSet": "/static/91eaa3facc9e8d623dfe8af408c76bb5/28457/wallpaper-155475.jpg 250w,\n/static/91eaa3facc9e8d623dfe8af408c76bb5/72129/wallpaper-155475.jpg 500w,\n/static/91eaa3facc9e8d623dfe8af408c76bb5/2dec6/wallpaper-155475.jpg 1000w,\n/static/91eaa3facc9e8d623dfe8af408c76bb5/c7e53/wallpaper-155475.jpg 1280w",
          "aspectRatio": 1.25,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "wallpaper-249787",
      "childImageSharp": {
        "fluid": {
          "originalName": "wallpaper-249787.jpg",
          "src": "/static/cfe363e895cd14cb4c4507b4ea1a6fd4/2dec6/wallpaper-249787.jpg",
          "srcSet": "/static/cfe363e895cd14cb4c4507b4ea1a6fd4/28457/wallpaper-249787.jpg 250w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/72129/wallpaper-249787.jpg 500w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/2dec6/wallpaper-249787.jpg 1000w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/43bf4/wallpaper-249787.jpg 1024w",
          "aspectRatio": 1.2503052503052503,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr",
      "childImageSharp": {
        "fluid": {
          "originalName": "alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg",
          "src": "/static/39571a7baf83d2b9c5c480c70929c79c/2dec6/alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg",
          "srcSet": "/static/39571a7baf83d2b9c5c480c70929c79c/28457/alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg 250w,\n/static/39571a7baf83d2b9c5c480c70929c79c/72129/alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg 500w,\n/static/39571a7baf83d2b9c5c480c70929c79c/2dec6/alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg 1000w,\n/static/39571a7baf83d2b9c5c480c70929c79c/4b0e8/alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg 1191w",
          "aspectRatio": 1.7776119402985076,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "49534_1251087275_large",
      "childImageSharp": {
        "fluid": {
          "originalName": "49534_1251087275_large.jpg",
          "src": "/static/e618291710f0c7ec514776b226a90475/2dec6/49534_1251087275_large.jpg",
          "srcSet": "/static/e618291710f0c7ec514776b226a90475/28457/49534_1251087275_large.jpg 250w,\n/static/e618291710f0c7ec514776b226a90475/72129/49534_1251087275_large.jpg 500w,\n/static/e618291710f0c7ec514776b226a90475/2dec6/49534_1251087275_large.jpg 1000w,\n/static/e618291710f0c7ec514776b226a90475/c292b/49534_1251087275_large.jpg 1500w,\n/static/e618291710f0c7ec514776b226a90475/a3400/49534_1251087275_large.jpg 1600w",
          "aspectRatio": 1.3050570962479608,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "post-44850-1288283997741",
      "childImageSharp": {
        "fluid": {
          "originalName": "post-44850-1288283997741.jpg",
          "src": "/static/10859d02e4ada4819042ed820674f1ce/2dec6/post-44850-1288283997741.jpg",
          "srcSet": "/static/10859d02e4ada4819042ed820674f1ce/28457/post-44850-1288283997741.jpg 250w,\n/static/10859d02e4ada4819042ed820674f1ce/72129/post-44850-1288283997741.jpg 500w,\n/static/10859d02e4ada4819042ed820674f1ce/2dec6/post-44850-1288283997741.jpg 1000w,\n/static/10859d02e4ada4819042ed820674f1ce/c292b/post-44850-1288283997741.jpg 1500w,\n/static/10859d02e4ada4819042ed820674f1ce/a3400/post-44850-1288283997741.jpg 1600w",
          "aspectRatio": 1.3333333333333333,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "halo-glyph-wallpaper",
      "childImageSharp": {
        "fluid": {
          "originalName": "halo-glyph-wallpaper.jpg",
          "src": "/static/f2b00d5c9ed5d3f67cd772671c3662f2/2dec6/halo-glyph-wallpaper.jpg",
          "srcSet": "/static/f2b00d5c9ed5d3f67cd772671c3662f2/28457/halo-glyph-wallpaper.jpg 250w,\n/static/f2b00d5c9ed5d3f67cd772671c3662f2/72129/halo-glyph-wallpaper.jpg 500w,\n/static/f2b00d5c9ed5d3f67cd772671c3662f2/2dec6/halo-glyph-wallpaper.jpg 1000w,\n/static/f2b00d5c9ed5d3f67cd772671c3662f2/c292b/halo-glyph-wallpaper.jpg 1500w,\n/static/f2b00d5c9ed5d3f67cd772671c3662f2/7efae/halo-glyph-wallpaper.jpg 1920w",
          "aspectRatio": 1.6,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "mass-effect-2-cerberus",
      "childImageSharp": {
        "fluid": {
          "originalName": "mass-effect-2-cerberus.jpg",
          "src": "/static/502d882d15f5c7db4123a8c0d4c1e2ad/2dec6/mass-effect-2-cerberus.jpg",
          "srcSet": "/static/502d882d15f5c7db4123a8c0d4c1e2ad/28457/mass-effect-2-cerberus.jpg 250w,\n/static/502d882d15f5c7db4123a8c0d4c1e2ad/72129/mass-effect-2-cerberus.jpg 500w,\n/static/502d882d15f5c7db4123a8c0d4c1e2ad/2dec6/mass-effect-2-cerberus.jpg 1000w,\n/static/502d882d15f5c7db4123a8c0d4c1e2ad/c292b/mass-effect-2-cerberus.jpg 1500w,\n/static/502d882d15f5c7db4123a8c0d4c1e2ad/7efae/mass-effect-2-cerberus.jpg 1920w",
          "aspectRatio": 1.6,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "City-Concept-Tron-Legacy-Wallpaper",
      "childImageSharp": {
        "fluid": {
          "originalName": "City-Concept-Tron-Legacy-Wallpaper.jpg",
          "src": "/static/2bd3ddfa6566de7d70653559b70545c5/2dec6/City-Concept-Tron-Legacy-Wallpaper.jpg",
          "srcSet": "/static/2bd3ddfa6566de7d70653559b70545c5/28457/City-Concept-Tron-Legacy-Wallpaper.jpg 250w,\n/static/2bd3ddfa6566de7d70653559b70545c5/72129/City-Concept-Tron-Legacy-Wallpaper.jpg 500w,\n/static/2bd3ddfa6566de7d70653559b70545c5/2dec6/City-Concept-Tron-Legacy-Wallpaper.jpg 1000w,\n/static/2bd3ddfa6566de7d70653559b70545c5/c292b/City-Concept-Tron-Legacy-Wallpaper.jpg 1500w,\n/static/2bd3ddfa6566de7d70653559b70545c5/7efae/City-Concept-Tron-Legacy-Wallpaper.jpg 1920w",
          "aspectRatio": 1.6,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  }
] and pos 1=>{
  "originalName": "wallpaper-249787.jpg",
  "src": "/static/cfe363e895cd14cb4c4507b4ea1a6fd4/2dec6/wallpaper-249787.jpg",
  "srcSet": "/static/cfe363e895cd14cb4c4507b4ea1a6fd4/28457/wallpaper-249787.jpg 250w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/72129/wallpaper-249787.jpg 500w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/2dec6/wallpaper-249787.jpg 1000w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/43bf4/wallpaper-249787.jpg 1024w",
  "aspectRatio": 1.2503052503052503,
  "sizes": "(max-width: 1000px) 100vw, 1000px"
}

And
files_missing_result

If you don't mind, create a repository with the bare minimum information that emulates this issue and share the link here, so it can be looked at in greater detail. If the contents is private or otherwise protected, just replace it with some dummy images and for any content that is coming from gatsby-source-graphql, just mock the the createPages data that is provided inside gatsby-node.js.

EDIT: Regarding your edit, those queries should be used when and if possible. They are not forbidden in any of the cases! And no modifications whatsoever needed

picture jonniebigodes on 28 Feb 2019
👍2

All 16 comments

Can you provide minimum reproduction repo?

yogeshkotadiya picture yogeshkotadiya on 28 Feb 2019

@yogeshkotadiya I've begun to remove everything except the necessary for a repo and it works, don't really know what's happening but as soon as I find where's the error I'll post it here

kuworking picture kuworking on 28 Feb 2019

@leworking i've picked up on your issue.
I've tried to reproduce it and breaking into smaller steps:

  • Created a new Gatsby website based on a starter.
  • Added the dependencies and configured them as i could, based on the information at hand.
    Transforming my gatsby-config.js into the following:
module.exports = {
    siteMetadata: {
      title: 'Gatsby missing images',
    },
    plugins: [
      {
        resolve: 'gatsby-source-filesystem',
        options: {
          name: 'images',
          path: `${__dirname}/src/assets/images`,
        },
      },
      'gatsby-plugin-sharp',
      'gatsby-transformer-sharp',
     /*  'gatsby-plugin-offline', */
    ],
  }
  • Copied over some images i had laying around to emulate the folder structure. Transforming it into:
    files_missing_structure
  • Modified the src/pages\index.js to reflect your issue, transforming it into:
import React from 'react';
import { graphql } from 'gatsby';
import Img from "gatsby-image"
const Index=({data})=>{
    const images = data.AllPostImages.edges
    console.log('====================================');
    console.log(`images:${JSON.stringify(images,null,2)} and pos 1=>${JSON.stringify(images[1].node.childImageSharp.fluid,null,2)}`);
    console.log('====================================');
    return (<div>
        <h1>Position 1</h1>
        <Img fluid={images[1].node.childImageSharp.fluid}/>
    </div>)

}

export const blogListQuery = graphql`
  query {
    AllPostImages: allFile(filter: { extension: { eq: "jpg" } }) {
      edges {
        node {
          name
          childImageSharp {
            fluid(maxWidth: 1000) {
              originalName
              src
              srcSet
              aspectRatio
              sizes
            }
          }
        }
      }
    }
  }
`

export default Index
  • Issuing gatsby build && gatsby serve resulted in the following:
    The console.log output:
images:[
  {
    "node": {
      "name": "wallpaper-155475",
      "childImageSharp": {
        "fluid": {
          "originalName": "wallpaper-155475.jpg",
          "src": "/static/91eaa3facc9e8d623dfe8af408c76bb5/2dec6/wallpaper-155475.jpg",
          "srcSet": "/static/91eaa3facc9e8d623dfe8af408c76bb5/28457/wallpaper-155475.jpg 250w,\n/static/91eaa3facc9e8d623dfe8af408c76bb5/72129/wallpaper-155475.jpg 500w,\n/static/91eaa3facc9e8d623dfe8af408c76bb5/2dec6/wallpaper-155475.jpg 1000w,\n/static/91eaa3facc9e8d623dfe8af408c76bb5/c7e53/wallpaper-155475.jpg 1280w",
          "aspectRatio": 1.25,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "wallpaper-249787",
      "childImageSharp": {
        "fluid": {
          "originalName": "wallpaper-249787.jpg",
          "src": "/static/cfe363e895cd14cb4c4507b4ea1a6fd4/2dec6/wallpaper-249787.jpg",
          "srcSet": "/static/cfe363e895cd14cb4c4507b4ea1a6fd4/28457/wallpaper-249787.jpg 250w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/72129/wallpaper-249787.jpg 500w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/2dec6/wallpaper-249787.jpg 1000w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/43bf4/wallpaper-249787.jpg 1024w",
          "aspectRatio": 1.2503052503052503,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr",
      "childImageSharp": {
        "fluid": {
          "originalName": "alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg",
          "src": "/static/39571a7baf83d2b9c5c480c70929c79c/2dec6/alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg",
          "srcSet": "/static/39571a7baf83d2b9c5c480c70929c79c/28457/alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg 250w,\n/static/39571a7baf83d2b9c5c480c70929c79c/72129/alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg 500w,\n/static/39571a7baf83d2b9c5c480c70929c79c/2dec6/alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg 1000w,\n/static/39571a7baf83d2b9c5c480c70929c79c/4b0e8/alien_tako_sashimi_wallpaper_by_psychopulse-d33cvhr.jpg 1191w",
          "aspectRatio": 1.7776119402985076,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "49534_1251087275_large",
      "childImageSharp": {
        "fluid": {
          "originalName": "49534_1251087275_large.jpg",
          "src": "/static/e618291710f0c7ec514776b226a90475/2dec6/49534_1251087275_large.jpg",
          "srcSet": "/static/e618291710f0c7ec514776b226a90475/28457/49534_1251087275_large.jpg 250w,\n/static/e618291710f0c7ec514776b226a90475/72129/49534_1251087275_large.jpg 500w,\n/static/e618291710f0c7ec514776b226a90475/2dec6/49534_1251087275_large.jpg 1000w,\n/static/e618291710f0c7ec514776b226a90475/c292b/49534_1251087275_large.jpg 1500w,\n/static/e618291710f0c7ec514776b226a90475/a3400/49534_1251087275_large.jpg 1600w",
          "aspectRatio": 1.3050570962479608,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "post-44850-1288283997741",
      "childImageSharp": {
        "fluid": {
          "originalName": "post-44850-1288283997741.jpg",
          "src": "/static/10859d02e4ada4819042ed820674f1ce/2dec6/post-44850-1288283997741.jpg",
          "srcSet": "/static/10859d02e4ada4819042ed820674f1ce/28457/post-44850-1288283997741.jpg 250w,\n/static/10859d02e4ada4819042ed820674f1ce/72129/post-44850-1288283997741.jpg 500w,\n/static/10859d02e4ada4819042ed820674f1ce/2dec6/post-44850-1288283997741.jpg 1000w,\n/static/10859d02e4ada4819042ed820674f1ce/c292b/post-44850-1288283997741.jpg 1500w,\n/static/10859d02e4ada4819042ed820674f1ce/a3400/post-44850-1288283997741.jpg 1600w",
          "aspectRatio": 1.3333333333333333,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "halo-glyph-wallpaper",
      "childImageSharp": {
        "fluid": {
          "originalName": "halo-glyph-wallpaper.jpg",
          "src": "/static/f2b00d5c9ed5d3f67cd772671c3662f2/2dec6/halo-glyph-wallpaper.jpg",
          "srcSet": "/static/f2b00d5c9ed5d3f67cd772671c3662f2/28457/halo-glyph-wallpaper.jpg 250w,\n/static/f2b00d5c9ed5d3f67cd772671c3662f2/72129/halo-glyph-wallpaper.jpg 500w,\n/static/f2b00d5c9ed5d3f67cd772671c3662f2/2dec6/halo-glyph-wallpaper.jpg 1000w,\n/static/f2b00d5c9ed5d3f67cd772671c3662f2/c292b/halo-glyph-wallpaper.jpg 1500w,\n/static/f2b00d5c9ed5d3f67cd772671c3662f2/7efae/halo-glyph-wallpaper.jpg 1920w",
          "aspectRatio": 1.6,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "mass-effect-2-cerberus",
      "childImageSharp": {
        "fluid": {
          "originalName": "mass-effect-2-cerberus.jpg",
          "src": "/static/502d882d15f5c7db4123a8c0d4c1e2ad/2dec6/mass-effect-2-cerberus.jpg",
          "srcSet": "/static/502d882d15f5c7db4123a8c0d4c1e2ad/28457/mass-effect-2-cerberus.jpg 250w,\n/static/502d882d15f5c7db4123a8c0d4c1e2ad/72129/mass-effect-2-cerberus.jpg 500w,\n/static/502d882d15f5c7db4123a8c0d4c1e2ad/2dec6/mass-effect-2-cerberus.jpg 1000w,\n/static/502d882d15f5c7db4123a8c0d4c1e2ad/c292b/mass-effect-2-cerberus.jpg 1500w,\n/static/502d882d15f5c7db4123a8c0d4c1e2ad/7efae/mass-effect-2-cerberus.jpg 1920w",
          "aspectRatio": 1.6,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  },
  {
    "node": {
      "name": "City-Concept-Tron-Legacy-Wallpaper",
      "childImageSharp": {
        "fluid": {
          "originalName": "City-Concept-Tron-Legacy-Wallpaper.jpg",
          "src": "/static/2bd3ddfa6566de7d70653559b70545c5/2dec6/City-Concept-Tron-Legacy-Wallpaper.jpg",
          "srcSet": "/static/2bd3ddfa6566de7d70653559b70545c5/28457/City-Concept-Tron-Legacy-Wallpaper.jpg 250w,\n/static/2bd3ddfa6566de7d70653559b70545c5/72129/City-Concept-Tron-Legacy-Wallpaper.jpg 500w,\n/static/2bd3ddfa6566de7d70653559b70545c5/2dec6/City-Concept-Tron-Legacy-Wallpaper.jpg 1000w,\n/static/2bd3ddfa6566de7d70653559b70545c5/c292b/City-Concept-Tron-Legacy-Wallpaper.jpg 1500w,\n/static/2bd3ddfa6566de7d70653559b70545c5/7efae/City-Concept-Tron-Legacy-Wallpaper.jpg 1920w",
          "aspectRatio": 1.6,
          "sizes": "(max-width: 1000px) 100vw, 1000px"
        }
      }
    }
  }
] and pos 1=>{
  "originalName": "wallpaper-249787.jpg",
  "src": "/static/cfe363e895cd14cb4c4507b4ea1a6fd4/2dec6/wallpaper-249787.jpg",
  "srcSet": "/static/cfe363e895cd14cb4c4507b4ea1a6fd4/28457/wallpaper-249787.jpg 250w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/72129/wallpaper-249787.jpg 500w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/2dec6/wallpaper-249787.jpg 1000w,\n/static/cfe363e895cd14cb4c4507b4ea1a6fd4/43bf4/wallpaper-249787.jpg 1024w",
  "aspectRatio": 1.2503052503052503,
  "sizes": "(max-width: 1000px) 100vw, 1000px"
}

And
files_missing_result

If you don't mind, create a repository with the bare minimum information that emulates this issue and share the link here, so it can be looked at in greater detail. If the contents is private or otherwise protected, just replace it with some dummy images and for any content that is coming from gatsby-source-graphql, just mock the the createPages data that is provided inside gatsby-node.js.

EDIT: Regarding your edit, those queries should be used when and if possible. They are not forbidden in any of the cases! And no modifications whatsoever needed

jonniebigodes picture jonniebigodes on 28 Feb 2019
👍2

Hi @jonniebigodes, I'm still troubleshooting the issue, but I can tell that it's (apparently) nothing related to
graphQL or to gatsby-images alone. I'm still isolating what's originating the failure, but if I remove (I think) the ThemeContext.Provider then it works, and this context is based on window.localStorage, which didn't build initially until I workarounded it with a "if it doesn't exist, then I set a default value".

The weird thing is that it shouldn't derive into the images not being shown, but as I say I'm still trying to isolate the error. I'll come back asap.

kuworking picture kuworking on 28 Feb 2019

@leworking one thing caught my eye. Semantic ui added. Semantic ui, if you don't adjust it correctly, starts throwing some weird errors with Gatsby that can be a bit troublesome to correct.
When i'm required to add semantic ui i usually take this gatsby-node.js configuration example and copy over the semantic folder like so

The weird thing is that it shouldn't derive into the images not being shown, but as I say I'm still trying to isolate the error. I'll come back asap.

That could be a bubbling up issue. Under the hood something is wrong and it starts bubbling up till the genesis, or in this case the query.

jonniebigodes picture jonniebigodes on 28 Feb 2019

I have the repo

https://github.com/leworking/gatsby_testing

In my hands, in serve it doesn't display the images

    <ThemeProvider theme={themes[globalStyle]}>
      <div>
        {images.map(({ node }, i) => {
          return <Img fluid={node.childImageSharp.fluid} />
        })}
      </div>
    </ThemeProvider>

But, if you remove the ThemeProvider (or don't use the globalStyle) then it works

    <ThemeProvider theme={themes.light}>
      <div>
        {images.map(({ node }, i) => {
          return <Img fluid={node.childImageSharp.fluid} />
        })}
      </div>
    </ThemeProvider>

At the end then it is related to not having access to window during build time, but I thought I had solved it (with the code of the repo). Obviously not, any help here will be greatly appreciated :)

kuworking picture kuworking on 28 Feb 2019

@leworking cloning as i'm typing this. Going to check it out and see if can come up with a solution to your issue? If you don't mind waiting a bit while i take a look at it? Sounds good?

jonniebigodes picture jonniebigodes on 28 Feb 2019

@leworking ok...it looks like we have a problem with the repository you've supplied.
I've cloned into my machine, installed the dependencies and issuing gatsby develop or gatsby build && gatsby serve i'm presented with the following:

...test_leworking\gatsby_testing>gatsby develop
success open and validate gatsby-configs — 0.017 s
success load plugins — 0.668 s
success onPreInit — 2.474 s
success delete html and css files from previous builds — 0.050 s
success initialize cache — 0.048 s
success copy gatsby files — 2.162 s
success onPreBootstrap — 0.020 s
success source and transform nodes — 0.194 s
success building schema — 0.868 s
success createPages — 0.001 s
success createPagesStatefully — 0.109 s
success onPreExtractQueries — 0.011 s
success update schema — 0.271 s
success extract queries from components — 0.190 s
success run graphql queries — 0.650 s — 3/3 4.65 queries/second
success write out page data — 0.011 s
success write out redirect data — 0.003 s
Generating image thumbnails [==============================] 8/8 0.4 secs 100%

info bootstrap finished - 34.941 s

success onPostBootstrap — 0.017 s
here ./node_modules/styled-components/dist/styled-components.esm.js
Module not found: Error: Can't resolve 'react-dom' in 'C:\Users\myuser\myfolder\test_leworking\gatsby_testing\node_modules\styled-components\dist'
resolve 'react-dom' in 'C:\Users\myuser\myfolder\test_leworking\gatsby_testing\node_modules\styled-components\dist'
  Parsed request is a module
  using description file: ........test_leworking\gatsby_testing\node_modules\styled-components\package.json (relative path: ./dist)
    resolve as module
      ....test_leworking\gatsby_testing\node_modules\styled-components\dist\node_modules doesn't exist or is not a directory
      ....test_leworking\gatsby_testing\node_modules\styled-components\node_modules doesn't exist or is not a directory
      ....test_leworking\gatsby_testing\node_modules\node_modules doesn't exist or is not a directory
      ....test_leworking\node_modules doesn't exist or is not a directory
      ....node_modules doesn't exist or is not a directory
      C:\Users\myuser\Documents\gatsby_fork\node_modules doesn't exist or is not a directory
      C:\Users\myuser\Documents\node_modules doesn't exist or is not a directory
      C:\Users\myuser\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in ....test_leworking\gatsby_testing\node_modules
        using description file: ....test_leworking\gatsby_testing\package.json (relative path: ./node_modules)
          using description file: ....test_leworking\gatsby_testing\package.json (relative path: ./node_modules/react-dom)
            no extension
              ....test_leworking\gatsby_testing\node_modules\react-dom doesn't exist
            .mjs
              ....test_leworking\gatsby_testing\node_modules\react-dom.mjs doesn't exist
            .js
              ....test_leworking\gatsby_testing\node_modules\react-dom.js doesn't exist
            .jsx
              ....test_leworking\gatsby_testing\node_modules\react-dom.jsx doesn't exist
            .wasm
              ....test_leworking\gatsby_testing\node_modules\react-dom.wasm doesn't exist
            .json
              ....test_leworking\gatsby_testing\node_modules\react-dom.json doesn't exist
            as directory
              ....test_leworking\gatsby_testing\node_modules\react-dom doesn't exist
[....test_leworking\gatsby_testing\node_modules\styled-components\dist\node_modules]
[....test_leworking\gatsby_testing\node_modules\styled-components\node_modules]
[....test_leworking\gatsby_testing\node_modules\node_modules]
[....test_leworking\node_modules]
[....node_modules]
[C:\Users\myuser\myfolder\folder_parent_to_cloned_example\node_modules]
[C:\Users\myuser\myfolder\node_modules]
[C:\Users\mysuer\node_modules]
[C:\Users\node_modules]
[C:\node_modules]
[....test_leworking\gatsby_testing\node_modules\react-dom]
[....test_leworking\gatsby_testing\node_modules\react-dom.mjs]
[....test_leworking\gatsby_testing\node_modules\react-dom.js]
[....test_leworking\gatsby_testing\node_modules\react-dom.jsx]
[....test_leworking\gatsby_testing\node_modules\react-dom.wasm]
[....test_leworking\gatsby_testing\node_modules\react-dom.json]
 @ ./node_modules/styled-components/dist/styled-components.esm.js 9:0-33 1920:15-23
 @ ./node_modules/gatsby-plugin-styled-components/gatsby-ssr.js
 @ ./.cache/api-runner-ssr.js
 @ ./.cache/develop-static-entry.js
error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html


  Error: ./node_modules/styled-components/dist/styled-components.esm.js
  Module not found: Error: Can't resolve 'react-dom' in '....test_leworking\gatsby_testing\node_modules\styled-compone  nts\dist'
  resolve 'react-dom' in '....\test_leworking\gatsby_testing\node_modules\styled-components\dist'
    Parsed request is a module
    using description file: .....\test_leworking\gatsby_testing\node_modules\styled-components\package.json (relative pa  th: ./dist)
      resolve as module
        .....\test_leworking\gatsby_testing\node_modules\styled-components\dist\node_modules doesn't exist or is not a d  irectory
        .....\test_leworking\gatsby_testing\node_modules\styled-components\node_modules doesn't exist or is not a direct  ory
        .....\test_leworking\gatsby_testing\node_modules\node_modules doesn't exist or is not a directory
        .....\test_leworking\node_modules doesn't exist or is not a directory
        .....\node_modules doesn't exist or is not a directory
        .....\gatsby_fork\node_modules doesn't exist or is not a directory
        .....\node_modules doesn't exist or is not a directory
        .....\node_modules doesn't exist or is not a directory
        .....\node_modules doesn't exist or is not a directory
        C:\node_modules doesn't exist or is not a directory
        looking for modules in .....\test_leworking\gatsby_testing\node_modules
          using description file: .....\test_leworking\gatsby_testing\package.json (relative path: ./node_modules)
            using description file: .....\test_leworking\gatsby_testing\package.json (relative path: ./node_modules/reac  t-dom)
              no extension
                .....\test_leworking\gatsby_testing\node_modules\react-dom doesn't exist
              .mjs
                ...test_leworking\gatsby_testing\node_modules\react-dom.mjs doesn't exist
              .js
                ...test_leworking\gatsby_testing\node_modules\react-dom.js doesn't exist
              .jsx
                ...test_leworking\gatsby_testing\node_modules\react-dom.jsx doesn't exist
              .wasm
                ...test_leworking\gatsby_testing\node_modules\react-dom.wasm doesn't exist
              .json
                ...test_leworking\gatsby_testing\node_modules\react-dom.json doesn't exist
              as directory
                ...test_leworking\gatsby_testing\node_modules\react-dom doesn't exist
  [...test_leworking\gatsby_testing\node_modules\styled-components\dist\node_modules]
  [...test_leworking\gatsby_testing\node_modules\styled-components\node_modules]
  [...test_leworking\gatsby_testing\node_modules\node_modules]
  [...test_leworking\node_modules]
  [...node_modules]
  [C:\Users\myuser\Documents\gatsby_fork\node_modules]
  [C:\Users\myuser\Documents\node_modules]
  [C:\Users\myuser\node_modules]
  [C:\Users\node_modules]
  [C:\node_modules]
  [...test_leworking\gatsby_testing\node_modules\react-dom]
  [...test_leworking\gatsby_testing\node_modules\react-dom.mjs]
  [...test_leworking\gatsby_testing\node_modules\react-dom.js]
  [...test_leworking\gatsby_testing\node_modules\react-dom.jsx]
  [...test_leworking\gatsby_testing\node_modules\react-dom.wasm]
  [...test_leworking\gatsby_testing\node_modules\react-dom.json]
   @ ./node_modules/styled-components/dist/styled-components.esm.js 9:0-33 1920:15-23
   @ ./node_modules/gatsby-plugin-styled-components/gatsby-ssr.js
   @ ./.cache/api-runner-ssr.js
   @ ./.cache/develop-static-entry.js

Compairing both the package.json you supplied and the issue description and the one on the repository. You might have forgotten some configuration you're using probably.

jonniebigodes picture jonniebigodes on 1 Mar 2019

Hi @jonniebigodes , sorry for the delay (sleep time), I see I cleaned too much the file ... I've updated it, and I've checked now that it works (well, I've deleted node_modules and run npm install again, and it works). Sorry again :)

kuworking picture kuworking on 1 Mar 2019

Ok, I see what's happening here. The code of the repo shouldn't build, it should give that error of ThemeProvider: Please make your "theme" prop an object.

When in develop, the "theme" prop is indeed an object. In building time, it is not. If I write this directly:

const BlogList = ({ data }) => {
  const images = data.AllPostImages.edges
  let myvar
  if (typeof window !== 'undefined') myvar = 'light'
  else myvar = 1

  return (
    <ThemeProvider theme={themes[myvar]}>
      <div>
        {images.map(({ node }, i) => {
          return <Img fluid={node.childImageSharp.fluid} />
        })}
      </div>
    </ThemeProvider>
  )
}

Then it works in develop, and it gives the error in build, which is great. The problem, then, is that with the code of the repo, it somehows skips the build error detection, and weirdingly it derives in not showing the images.

How does it sound?

kuworking picture kuworking on 1 Mar 2019

Ok, I see what's happening here. The code of the repo shouldn't build, it should give that error of ThemeProvider: Please make your "theme" prop an object.

When in develop, the "theme" prop is indeed an object. In building time, it is not. If I write this directly:

```js
const BlogList = ({ data }) => {
const images = data.AllPostImages.edges
let myvar
if (typeof window !== 'undefined') myvar = 'light'
else myvar = 1

return (

You can't put a number to get an object element.
If you put a number then that will be considered an Array, and it will become undefined since themes array doesn't exist.

  let myvar
  if (typeof window !== 'undefined') myvar = 'light'
  else myvar = 'dark'

One more thing window object will be undefined when you build gatsby site because it's a server-side rendering and only browser client have window Object.
Once your code will re-render in browser, window Object will available again.
Since in your code if window is undefined it will set myvar to 1 which is invalid for Object. That's why you're getting that error.

yogeshkotadiya picture yogeshkotadiya on 1 Mar 2019

Yes @yogeshkotadiya , the mistake was this (that number came from a previous version where I used numbers), but the _problem_ was that gatsby builder wasn't complaining about it, and instead it returned errors related with gatsby-images that should not have been affected by this (or this is what I think).

And yes, I've discovered that we don't have access to the window object during build time, and it makes total sense (once you read about it)

kuworking picture kuworking on 1 Mar 2019

Replace your Image Query with this

export const blogListQuery4 = graphql`
  query {
    AllPostImages: allFile(filter: { extension: { eq: "jpg" } }) {
      edges {
        node {
          name
          childImageSharp {
            fluid(maxWidth: 1000) {
                ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`
yogeshkotadiya picture yogeshkotadiya on 1 Mar 2019

Yes @yogeshkotadiya , the mistake was this (that number came from a previous version where I used numbers), but the _problem_ was that gatsby builder wasn't complaining about it, and instead it returned errors related with gatsby-images that should not have been affected by this (or this is what I think).

like i mentioned before it's a bubbling up issue. The problem comes from below and it rises through the hierarchy of objects till the parent object.

jonniebigodes picture jonniebigodes on 1 Mar 2019

Yes @yogeshkotadiya , the mistake was this (that number came from a previous version where I used numbers), but the _problem_ was that gatsby builder wasn't complaining about it, and instead it returned errors related with gatsby-images that should not have been affected by this (or this is what I think).

like i mentioned before it's a bubbling up issue. The problem comes from below and it rises through the hierarchy of objects till the parent object.

Then that's it. Still, isn't the building process failing here? Since it shouldn't compile (?)
Anyway, to me we can close the ticket, and thanks a lot both of you for your time

kuworking picture kuworking on 1 Mar 2019

@leworking closing this issue! Feel free to open a new one, should new issues arise. And no need to thank, glad i could help even if a little.

jonniebigodes picture jonniebigodes on 1 Mar 2019
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

kalinchernev picture kalinchernev  ·  3Comments
ghost picture ghost  ·  3Comments
rossPatton picture rossPatton  ·  3Comments
totsteps picture totsteps  ·  3Comments
ferMartz picture ferMartz  ·  3Comments