gatsby: gatsby-image is breaking on me and I can't figure out why...

Description

working on a site…querying images with graphql…and things are breaking oddly…

So, I set up my image route in the gatsby-config.js file, like so:

`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `images`,
      path: `${__dirname}/src/images/`,
  },
},

…then I create my query for my image, like so:

export const pageQuery = graphql`
  query {
    imageOne: file(relativePath: { eq: "imageOne.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 2000) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

and then when I run gatsby develop in the terminal I get the following series of errors:

Generating image thumbnails [==============----------------] 9/19 1.8 secs 47%
(sharp:1212): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject'

(sharp:1212): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed
Generating image thumbnails [================--------------] 10/19 2.2 secs 53%
(sharp:1212): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject'

(sharp:1212): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed

(sharp:1212): GLib-GObject-WARNING **: invalid uninstantiatable type '(null)' in cast to 'GObject'

(sharp:1212): GLib-GObject-CRITICAL **: g_object_set_qdata: assertion 'G_IS_OBJECT (object)' failed
Generating image thumbnails [==============================] 19/19 5.4 secs 100%

but the app works with the images…at least…for one or two gatsby develop cycles, but after a little bit, I end up getting this series of error messages in the console:

[HMR] connected

Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:48 Uncaught TypeError: Cannot read property 'childImageSharp' of undefined
    at _default (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:48)
    at ProxyFacade (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:675)
    at mountIndeterminateComponent (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:13744)
    at beginWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:14068)
    at performUnitOfWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16415)
    at workLoop (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16453)
    at HTMLUnknownElement.callCallback (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:195)
    at invokeGuardedCallback (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:248)
    at replayUnitOfWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:15744)
    at renderRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16547)
    at performWorkOnRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17386)
    at performWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17294)
    at performSyncWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17266)
    at requestWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17154)
    at scheduleWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16948)
    at scheduleRootUpdate (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17636)
    at updateContainerAtExpirationTime (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17663)
    at updateContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17690)
    at ReactRoot.render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17956)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18096)
    at unbatchedUpdates (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17517)
    at legacyRenderSubtreeIntoContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18092)
    at render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18151)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:97)
Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-error-overlay/lib/index.js:2172 The above error occurred in the <_default> component:
    in _default (created by PageRenderer)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:59)
    in EnsureResources (created by RouteHandler)
    in ScrollContext (at root.js:80)
    in RouteHandler (created by Root)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by Root)
    in Root (at root.js:104)
    in _default (created by HotExported_default)
    in AppContainer (created by HotExported_default)
    in HotExported_default (at app.js:55)

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.

__stack_frame_overlay_proxy_console__ @ Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-error-overlay/lib/index.js:2172
Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/@reach/router/es/index.js:123 Uncaught TypeError: Cannot read property 'childImageSharp' of undefined
    at _default (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:48)
    at ProxyFacade (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:675)
    at mountIndeterminateComponent (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:13744)
    at beginWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:14068)
    at performUnitOfWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16415)
    at workLoop (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16453)
    at renderRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16532)
    at performWorkOnRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17386)
    at performWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17294)
    at performSyncWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17266)
    at requestWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17154)
    at scheduleWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16948)
    at scheduleRootUpdate (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17636)
    at updateContainerAtExpirationTime (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17663)
    at updateContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17690)
    at ReactRoot.render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17956)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18096)
    at unbatchedUpdates (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17517)
    at legacyRenderSubtreeIntoContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18092)
    at render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18151)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:97)
Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-error-overlay/lib/index.js:2172 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by Root)
    in Root (at root.js:104)
    in _default (created by HotExported_default)
    in AppContainer (created by HotExported_default)
    in HotExported_default (at app.js:55)

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

__stack_frame_overlay_proxy_console__ @ Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-error-overlay/lib/index.js:2172
Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-error-overlay/lib/index.js:2172 TypeError: Cannot read property 'childImageSharp' of undefined
    at _default (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:48)
    at ProxyFacade (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:675)
    at mountIndeterminateComponent (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:13744)
    at beginWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:14068)
    at performUnitOfWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16415)
    at workLoop (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16453)
    at renderRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16532)
    at performWorkOnRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17386)
    at performWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17294)
    at performSyncWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17266)
    at requestWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17154)
    at scheduleWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16948)
    at scheduleRootUpdate (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17636)
    at updateContainerAtExpirationTime (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17663)
    at updateContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17690)
    at ReactRoot.render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17956)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18096)
    at unbatchedUpdates (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17517)
    at legacyRenderSubtreeIntoContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18092)
    at render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18151)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:97)
__stack_frame_overlay_proxy_console__ @ Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-error-overlay/lib/index.js:2172
Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:48 Uncaught TypeError: Cannot read property 'childImageSharp' of undefined
    at _default (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:48)
    at ProxyFacade (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:675)
    at mountIndeterminateComponent (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:13744)
    at beginWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:14068)
    at performUnitOfWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16415)
    at workLoop (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16453)
    at HTMLUnknownElement.callCallback (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:195)
    at invokeGuardedCallback (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:248)
    at replayUnitOfWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:15744)
    at renderRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16547)
    at performWorkOnRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17386)
    at performWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17294)
    at performSyncWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17266)
    at requestWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17154)
    at scheduleWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16948)
    at scheduleRootUpdate (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17636)
    at updateContainerAtExpirationTime (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17663)
    at updateContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17690)
    at ReactRoot.render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17956)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18096)
    at unbatchedUpdates (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17517)
    at legacyRenderSubtreeIntoContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18092)
    at render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18151)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:97)
Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-error-overlay/lib/index.js:2172 The above error occurred in the <_default> component:
    in _default (created by PageRenderer)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:59)
    in EnsureResources (created by RouteHandler)
    in ScrollContext (at root.js:80)
    in RouteHandler (created by Root)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by Root)
    in Root (at root.js:104)
    in _default (created by HotExported_default)
    in AppContainer (created by HotExported_default)
    in HotExported_default (at app.js:55)

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.

__stack_frame_overlay_proxy_console__ @ Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-error-overlay/lib/index.js:2172
Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/@reach/router/es/index.js:123 Uncaught TypeError: Cannot read property 'childImageSharp' of undefined
    at _default (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:48)
    at ProxyFacade (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:675)
    at mountIndeterminateComponent (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:13744)
    at beginWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:14068)
    at performUnitOfWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16415)
    at workLoop (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16453)
    at renderRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16532)
    at performWorkOnRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17386)
    at performWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17294)
    at performSyncWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17266)
    at requestWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17154)
    at scheduleWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16948)
    at scheduleRootUpdate (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17636)
    at updateContainerAtExpirationTime (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17663)
    at updateContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17690)
    at ReactRoot.render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17956)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18096)
    at unbatchedUpdates (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17517)
    at legacyRenderSubtreeIntoContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18092)
    at render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18151)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:97)
Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-error-overlay/lib/index.js:2172 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by Root)
    in Root (at root.js:104)
    in _default (created by HotExported_default)
    in AppContainer (created by HotExported_default)
    in HotExported_default (at app.js:55)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-error-overlay/lib/index.js:2172
Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17355 Uncaught TypeError: Cannot read property 'childImageSharp' of undefined
    at _default (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:48)
    at ProxyFacade (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:675)
    at mountIndeterminateComponent (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:13744)
    at beginWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:14068)
    at performUnitOfWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16415)
    at workLoop (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16453)
    at renderRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16532)
    at performWorkOnRoot (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17386)
    at performWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17294)
    at performSyncWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17266)
    at requestWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17154)
    at scheduleWork (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:16948)
    at scheduleRootUpdate (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17636)
    at updateContainerAtExpirationTime (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17663)
    at updateContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17690)
    at ReactRoot.render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17956)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18096)
    at unbatchedUpdates (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:17517)
    at legacyRenderSubtreeIntoContainer (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18092)
    at render (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:18151)
    at eval (:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:97)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/src/pages/index.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-hot-loader/dist/react-hot-loader.development.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/node_modules/react-dom/cjs/react-dom.development.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
:8000/Users/rchrdnsh/Dropbox/Code/Gatsby/alma/.cache/app.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

…and the site fails to work properly. There are no errors in the terminal, but only in the console, and the screen is completely blank. I can manually type in the URL or other pages without images and they load just fine, but the index page, which is where the images are, does not work at all.

I can fix this problem by simply changing the names of my images and their associated variable names in the graphql query, but it then will break again on any subsequent gatsby develop builds. This makes me think that it’s not my code, but rather another issue that I may not be able to control, but of course, I have no idea, really.

Steps to reproduce

I am following all the steps in the tutorial for gatsby-image as well as the linked articles about using gatsby-image, and I’ve been through my code quite a few times trying to see if I did something wrong, but I think it all looks good to me. I checked to see if all the images are at least 2000px wide, which they are, and I can fix the issue temporally simply by changing the names of the images and their associated variable names, but I get the same series of errors in the terminal and the newly named images only work once before they break again with the same console error messages.

Expected result

gatsby-image should simply work as expected and not break my app completely.

Actual result

30 error messages in the console and the site does not work at all, as far as I can tell, but the site builds in the terminal. So these error messages are only in the browser console.

I really have no idea what is going on, but I’m sort of confident that it is not my code per se, as I am simply following the directions, but please let me know if it is, as I am new to this whole Gatsby thing.

Environment

System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.12.0 - /usr/local/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 62.0.3
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.0 => 2.0.0
    gatsby-image: ^2.0.14 => 2.0.14
    gatsby-mdx: ^0.2.0 => 0.2.0
    gatsby-plugin-emotion: ^2.0.5 => 2.0.5
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5
    gatsby-plugin-offline: ^2.0.6 => 2.0.6
    gatsby-plugin-page-transitions: ^1.0.7 => 1.0.7
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
    gatsby-plugin-sharp: ^2.0.7 => 2.0.7
    gatsby-plugin-styled-components: ^3.0.0 => 3.0.0
    gatsby-plugin-typography: ^2.2.0 => 2.2.0
    gatsby-source-filesystem: ^2.0.2 => 2.0.2
    gatsby-transformer-remark: ^2.1.6 => 2.1.6
    gatsby-transformer-sharp: ^2.1.3 => 2.1.3
  npmGlobalPackages:
    gatsby-cli: 2.4.3

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 21 (2 by maintainers)

Most upvoted comments

I had the same (or a very similar) issue, using gatsby-mdx and a featured image in a page’s markdown file.

TL;DR: I solved it by reinstalling my dependencies with rm -rf node_modules, then yarn

The page’s .mdx file includes the frontmatter:

---
featuredImage: assets/templates_tweak_3000x1800-1-resized.png
---

It’s probably worth mentioning that the folder structure is like this:

src
📂layouts
  📝 project.js // (this is the template)
📂 projects
  📂 projectName
    📂 assets
    ⬇️ projectName.md

The template’s graphQL full query is:


export const pageQuery = graphql`
  query ProjectQuery($id: String) {
    mdx(id: { eq: $id }) {
      id
      frontmatter {
        project
        description
        designer
        bio
        links
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 980) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
      code {
        body
      }
    }
  }
`

I was getting this error when I ran gatsby develop and viewed it in my browser:

×
TypeError: Cannot read property 'childImageSharp' of null
ProjectPage
src/layouts/project.js:160
  157 |   <Img
  158 |     title="Project header image"
  159 |     alt={mdx.frontmatter.project}
> 160 |     fluid={mdx.frontmatter.featuredImage.childImageSharp.fluid}
  161 |   />
  162 | </Hero>
  163 | <MainCol>

This confused me for quite awhile, made me internally debate my worth as a human, then ponder other frameworks, go have a snack, and Google again and again until I came across a Spectrum chat thread from @rchrdnsh who mentioned that things worked when he restarted from scratch. So, I tried to delete and reinstall my dependencies, and … sure enough, it’s working again. ¯\_(ツ)_/¯

thundernixon on Feb 6, 2019

I played around with the interactive GraphiQL environment and found out, that childImageSharp is not null, when I remove the images/ prefix. So in my case this works:

  query {
    hero: file(relativePath: { eq: "hero.png" }) {
      childImageSharp {
        fluid(maxWidth: 1080, maxHeight: 400) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }

I’m not sure why, because I specify the prefix in gatsby-config.js:

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `static`),
      },
    },

adonig on Nov 25, 2019

Just came here to say, that my project currently suffers from the same problem. I tried gatsby clean && rm -rf node_modules && npm install but sadly it did not help. I checked out gatsby/examples/recipes-gatsby-image and that example works nicely. I upgraded all dependencies using ncu -u && npm install and the example still works. Now I try finding out what my project does differently. I’m using gatsby-plugin-typescript and some other plugins that might cause trouble. I will let you know if I find a solution.

adonig on Nov 25, 2019

I couldn’t find our what the actual problem is, but I could find a connection: I used this package https://github.com/birkir/gatsby-source-prismic-graphql and had GraphQL Issues. I solved the specific problem by using a yarn resolutions tag in my package.json ("resolutions": {"gatsby-source-graphql": "2.1.24"}). I now removed the package and it works fine again. 😦

zeekrey on Nov 25, 2019

Hello,

I might be come with a solutions. I get that the example code from the author is from some tutorials i’ve encountered as well 🤔

But here’s may be the fix:

export const query = graphql`
  query {
    fileName: file(relativePath: { eq: "images/myimage.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 400, maxHeight: 250) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

Notice in the { eq: “images/myimage.jpg”}) { Once i put prefix path to the image file, my day is start to feel exciting again

adithwip on Aug 5, 2019

Yup, nuking the cache and node modules fixed this for me as well. Would be nice to nail down the underlying cause.

mediamaker on Jul 23, 2019

I don’t know if it can help. I ran into the same issue, with the exact same error log. Running a graphiql query on allImageSharp prompted a message complaining about the size of some images that were smaller than the maxWidth value I put in the query.( e.g. fluid(maxWidth: 2000)). After filtering my images in the static folder fixing the minimal width on the maxWidth value, it fixed the issue.

ghost on Oct 27, 2018