Updating the gatsby to v2 causes the modal to show the loading image

[JonVisc]

This is NOT an issue with the repo as it is currently. So it doesn't have to be addressed but I am looking for help.

I updated it to a more recent gatsby version. Specifically I updated to these dependency versions:

"dependencies": {
    "babel-plugin-styled-components": "^1.10.0",
    "gatsby": "2.0.91",
    "gatsby-image": "2.0.26",
    "gatsby-plugin-manifest": "2.0.13",
    "gatsby-plugin-offline": "2.0.21",
    "gatsby-plugin-react-helmet": "3.0.5",
    "gatsby-plugin-sharp": "2.0.17",
    "gatsby-plugin-styled-components": "^3.0.6",
    "gatsby-source-filesystem": "2.0.16",
    "gatsby-transformer-sharp": "2.1.10",
    "prop-types": "^15.6.2",
    "react": "16.7.0",
    "react-dom": "16.7.0",
    "react-helmet": "^5.2.0",
    "styled-components": "^4.1.3"
  },

And now when I run it, it'll load everything on the page fine but when I click on an image to bring up the lightbox it'll bring up the extremely low resolution one. And potentially it may switch out the high resolution image with the low resolution image.

I have tried to figure out what is going on with gatsby-image but at a loss right now. (I have only started using Gatsby a couple weeks ago). I'll be looking into the issue as well and post back if I find out the issue with the upgrade.

[JonVisc]

I found out that Sizes was deprecated so I switch that out in index.js...

export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        title
      }
    }
    allImageSharp {
      edges {
        node {
          fluid(maxWidth: 1800) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
`

And in Lightbox.js...

<Fragment>
        <Gallery>
          {images.map((img, i) => (
            <GalleryItem key={img.node.fluid.src}>
              <a href={img.node.fluid.src} alt="Car Image" onClick={e => this.handleClick(e, i)}>
                <StyledImg fluid={img.node.fluid} />
              </a>
            </GalleryItem>
          ))}
        </Gallery>

        <LightboxModal visible={showLightbox} onKeyUp={e => this.handleKeyDown(e)}>
          <LightboxContent>
            <Img fluid={images[selectedImage].node.fluid} />
            <Controls>
              <Button onClick={this.closeModal}>Close</Button>
              <LeftRight>
                <Button onClick={this.goBack} disabled={selectedImage === 0}>
                  Previous
                </Button>
                <Button onClick={this.goForward} disabled={selectedImage === images.length - 1}>
                  Next
                </Button>
              </LeftRight>
            </Controls>
          </LightboxContent>
        </LightboxModal>
      </Fragment>

So I believe I am more current but the issue is still occurring. The investigation continues.

[JonVisc]

Apparently it was an issue in some version along the line. I updated them all below and now it works fine.

"dependencies": {
    "babel-plugin-styled-components": "^1.10.0",
    "gatsby": "2.1.19",
    "gatsby-image": "2.0.30",
    "gatsby-plugin-manifest": "2.0.20",
    "gatsby-plugin-offline": "2.0.24",
    "gatsby-plugin-react-helmet": "3.0.7",
    "gatsby-plugin-sharp": "2.0.23",
    "gatsby-plugin-styled-components": "^3.0.6",
    "gatsby-source-filesystem": "2.0.23",
    "gatsby-transformer-sharp": "2.1.15",
    "prop-types": "^15.6.2",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-helmet": "^5.2.0",
    "styled-components": "^4.1.3"
  },