[gatsby-plugin-image] Cannot read property 'startsWith' of undefined

[PSalaun]

Description

Builds are failing since I've updated to gatsby-plugin-image, because it seems like one image does not have a valid src when processed. The terminal displays this:

warn [gatsby-plugin-image] Could not find values for the following props at build time: src
warn [gatsby-plugin-image] No data found for image "undefined"

I've added console.log(filename, [...images.entries()]); in node_modules/gatsby-plugin-image/dist/node-apis/image-processing.js before the call to writeImages, and it's showing:
/path/to/my/image/component.tsx, [ [ '2298356842', {} ] ]

So there is an image hash, but no properties (including the src). And the code of writeImages does not take into account this scenario.

I've tried to clear the cache and delete node_modules, to no avail.

Any idea how I could identify the culprit file with just the hash? For now I'm using a quick workaround, by returning at the beginning of the map function, if src is undefined (line 86 of this file)

Steps to reproduce

Unfortunately I didn't managed to get reproduction repo working yet, I'm gonna try soon to migrate another website with a smaller yet very similar codebase.

Expected result

If there is an issue with an image src at build time, it should not fail but just warn.

Actual result

Build is failing, and the output does not give much informations to debug further.

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    Yarn: 1.22.10 - node_modules/.bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 89.0.4389.82
    Edge: 89.0.774.48
    Firefox: 86.0
    Safari: 13.0.5
  npmPackages:
    gatsby: ^3.0.3 => 3.0.3
    gatsby-cli: ^3.0.0 => 3.0.0
    gatsby-image: ^3.0.0 => 3.0.0
    gatsby-legacy-polyfills: ^1.0.0 => 1.0.0
    gatsby-omni-font-loader: ^1.3.0 => 1.3.0
    gatsby-parallel-runner: ^1.2.3 => 1.3.0
    gatsby-plugin-chakra-ui: ^0.1.4 => 0.1.4
    gatsby-plugin-gatsby-cloud: ^2.0.0 => 2.0.0
    gatsby-plugin-image: ^1.0.0 => 1.0.0
    gatsby-plugin-mailchimp: ^5.2.2 => 5.2.2
    gatsby-plugin-manifest: ^3.0.0 => 3.0.0
    gatsby-plugin-offline: ^4.0.0 => 4.0.0
    gatsby-plugin-preconnect: ^1.2.0 => 1.2.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
    gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5
    gatsby-plugin-sharp: ^3.0.0 => 3.0.0
    gatsby-plugin-sitemap: ^3.0.0 => 3.0.0
    gatsby-plugin-ts: ^2.7.1 => 2.7.1
    gatsby-plugin-ts-config: ^1.1.5 => 1.1.5
    gatsby-plugin-tsconfig-paths: ^1.0.2 => 1.0.2
    gatsby-plugin-tslint: ^0.0.2 => 0.0.2
    gatsby-plugin-typegen: ^2.2.4 => 2.2.4
    gatsby-plugin-typescript: ^3.0.0 => 3.0.0
    gatsby-plugin-webfonts: ^2.0.0 => 2.0.0
    gatsby-source-filesystem: ^3.0.0 => 3.0.0
    gatsby-source-wordpress: ^5.0.0 => 5.0.0
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0
  npmGlobalPackages:
    gatsby-cli: 2.14.0

[michel-fresh]

Similar issue here since upgrading this morning, but the error is cannot read property details of undefined
Maybe a step removed, I believe it's happening when images are not present on a given locale (images coming from contentful).
I second the idea that this shouldn't break a build, and that the returned error is nebulous

[petercampanelli]

I had this issue when trying to pass a prop value into src for a StaticImage component. This is restricted. I resolved by moving the component into a different file but this also can be resolved by using a GatsbyImage component.

[AbsoluteSuccess]

@LekoArts , is it possible to fix this issue, modifying the writeImages function (images-processing file)? I can think about adding some logic for handling the absence of src. If this is possible, can I work on this issue?

[philr35]

I was getting this issue because I was trying to pass in an image that I got from my useStaticQuery. This won't work and is intended behavior, read here.

I had this in my static query:

hamburgerIcon: file(extension: { eq: "svg" }, name: { eq: "hamburger-icon" }) {
    name
    publicURL
}

This won't work:

<StaticImage src={hamurgerIcon.publicURL} width={24} height={24} />

This will work:

<img src={hamburgerIcon.publicURL} width="24" height="24" />

Once I used a normal img tag, the problem went away.

[soVader]

Asked this on StackOverflow: "Gatsby plugin image cannot read property 'startsWith'". At the current moment I'm unable to get StaticImage to work.

[LekoArts]

Please check your code, until #30271 is merged and released you'll see this error instead of a more detailed one where your user error lies. <StaticImage /> is working as expected, you'll need to check the limitations and use it correctly.