Gatsby Image not working after Netlify Build

[bradleyDouglas]

Hello

I'm currently developing a simple site using Prismic, Gatsby and Netlify.

I'm using version 3.5.0 and encountered an error that wouldn't allow me to use Gatsby Image. I found a workaround to that and everything was working fine locally. In my gatsby-node file:

var dir = './.cache/caches/gatsby-source-prismic-graphql'

exports.onPreBootstrap = () => {
    if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir)
    }
}

This allowed me to use gatsby-image.

However, when I build on Netlify I am receiving a 404 error for all my images and receiving some errors that aren't showing up locally. When I inspect a console.log on the Omaha page I see the same data both locally and after the build. However, the picture element is missing on production.

One noticeable error is Cannot read property 'siteMetadata' of undefined which is just using the useStaticQuery. Come to think of it, the other major error I'm now receiving is on the splash page which is also using useStaticQuery

Here is what my IndexPage Component looks like:

const SPLASH_PAGE_QUERY = graphql`
    query SplashPageQuery {
        prismic {
            splash_page(uid: "home", lang: "en-us") {
                intro_content
                splash_image
                splash_imageSharp {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
    }
`

const IndexPage = () => {
    const {
        prismic: { splash_page },
    } = useStaticQuery(SPLASH_PAGE_QUERY)

    if (!splash_page) return null

    return (
        <>
            <SEO title="Home" />
            <section className={s.section}>
                <div className={s.section__wrapper}>
                    <div className={s.section__img}>
                        <Img
                            fluid={
                                splash_page.splash_imageSharp.childImageSharp
                                    .fluid
                            }
                            className={s.imageWrapper}
                        />
                    </div>
                    <div className={s.section__body}>
                        {RichText.render(splash_page.intro_content)}
                        <div className={s.buttons}>
                            <Link to="/lincoln" className={`btn ${s.btn}`}>
                                Lincoln
                            </Link>
                            <Link to="/omaha" className={`btn ${s.btn}`}>
                                Omaha
                            </Link>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}

export default IndexPage

Do I need to roll back to a previous version? Or how do I fix this? Thanks.

Here is a link to the production build: https://modest-bell-fb1e56.netlify.app/

[bradleyDouglas]

I changed my staticQuery inside my index page to a page query. Ran the check:

const prismicContent = data.prismic.allSplash_pages.edges[0]
if (!prismicContent) return null

That seemed to fix the issue with my TypeError of splash_page undefined.

However, my Gatsby Images are still not working. When I inspect the data in a console log I'm doing I can see that the images are indeed in the static file and are there. But for some reason, the Gatsby Image isn't working.