Gatsby: Gatsby-Image error during build

[jordyvanraaij]

Description

An error occurs in the Gatsby-Image plugin during a new build

Steps to reproduce

Running gatsby build

Expected result

The build should run

Actual result

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  42 |   var convertedProps = convertProps(props); // Find src
  43 |
> 44 |   var src = convertedProps.fluid ? convertedProps.fluid.src : convertedProps.fixed.src;
     | ^
  45 |
  46 |   if (imageCache[src]) {
  47 |     return true;


  WebpackError: TypeError: Cannot read property 'src' of undefined

  - index.js:44 inImageCache
    [lib]/[gatsby-image]/index.js:44:1

  - index.js:162 new Image
    [lib]/[gatsby-image]/index.js:162:1

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.7.0 - /usr/local/bin/node
    Yarn: yarn install v0.24.6
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 56.61s. - ~/.node/bin/yarn
    npm: 6.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 61.0.1
    Safari: 11.1.2
  npmPackages:
    gatsby: next => 2.0.0-beta.106
    gatsby-image: next => 2.0.0-beta.8
    gatsby-link: next => 2.0.0-beta.22
    gatsby-plugin-mailchimp: ^2.2.3 => 2.2.3
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4
    gatsby-plugin-sharp: next => 2.0.0-beta.8
    gatsby-plugin-styled-components: next => 3.0.0-beta.3
    gatsby-source-prismic: ^1.0.2 => 1.0.2
    gatsby-transformer-remark: next => 2.1.1-beta.6
    gatsby-transformer-sharp: next => 2.1.1-beta.7
  npmGlobalPackages:
    gatsby-cli: 1.1.58

[KyleAMathews]

You're not passing in data to one of your gatsby image components so it throws an error. Perhaps try clicking around your pages while running gatsby develop to see where this is happening.

[kenjonespizza]

You're not passing in data to one of your gatsby image components so it throws an error. Perhaps try clicking around your pages while running gatsby develop to see where this is happening.

Thanks @KyleAMathews ! Incase it helps anyone else getting this error, I simply had some non-matching fixed & fluid terms floating around. My error messages pointed me directly to the problem once I took the time to read them ;)

[EvHaus]

I'm having the same issue. I've clicked around on every page in gatsby develop mode and all images load just fine, but the application won't build as a result of this error. I have no idea where to look next.

I ended up adding the following hack to ensure gatsby-build works:

<Img
   fixed={typeof window === 'undefined' ? {src: {}} : undefined}
   fluid={myRealImage} />

I would recommend improving the error message so that it provides more detail about where exactly this failure is coming from. Otherwise it's nearly impossible to troubleshoot this.

[seanislegend]

I'm having the same issue. I've clicked around on every page in gatsby develop mode and all images load just fine, but the application won't build as a result of this error. I have no idea where to look next.

I ended up adding the following hack to ensure gatsby-build works:

<Img
   fixed={typeof window === 'undefined' ? {src: {}} : undefined}
   fluid={myRealImage} />

I've not yet looked into _why_ this fixes it, but it did fix this issue for me 👍🏻

[bushblade]

I am having exactly the same issue. Everything works fine in development including all images but not in build. I tried the @EvHaus 's fix above but that does not solve it for me.
Edited to add:
I missed one component where I used gatsby-image, @EvHaus 's fix now works for me. Many thanks, though I expect this is not the desired solution?

[ghost]

The problem has to do with the variable inside fluid={. . .} or fixed={. . . }. Ensure the variable inside is correct.