Gatsby plugin image cannot read property 'startsWith'

Question

Didn't find this on the site but I did find an open bug on Github and the only resolution, at time of writing, is to use GatsbyImage. Learning to convert a Gatsby project from 2 to 3 I've installed gatsby-plugin-image and am converting a component that uses a non-changing image in a Hero component and per the docs StaticImage should work.

The old component:

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Image from 'gatsby-image'


const query = graphql`
{
  person: file(relativePath: {eq: "person.png"}) {
    childImageSharp {
      fluid {
        ...GatsbyImageSharpFluid
      }
    }
  }
}
`

const Hero = ({ showPerson }) => {
  const { person } = useStaticQuery(query)

  return (
    <header className="hero">
      {showPerson && <Image fluid={person.childImageSharp.fluid} className="hero-person" />}
    </header>
  )
}

export default Hero

new component:

import React from 'react'
import { StaticImage } from 'gatsby-plugin-image'

import personImage from '../assets/person.png'

const Hero = ({ showPerson }) => {
  console.log(personImage)
  return (
    <header className="hero">
      {showPerson && <StaticImage src={personImage} className="hero-person" alt="person image" />}
    </header>
  )
}

export default Hero

When I log the asset I get (no issues with my file path):

Hero.js:7 /static/person-c7035ca6b9544d80f8f0626ea3e22ace.png

but the log renders:

react_devtools_backend.js:2430 No data found for image "undefined"
Image not loaded /static/person-c7035ca6b9544d80f8f0626ea3e22ace.png

and in the terminal I get:

"gatsby-plugin-image" threw an error while running the preprocessSource lifecycle:

Cannot read property 'startsWith' of undefined

With Gatsby image StaticImage is there a way to render an image that doesn't change in a component without using GatsbyImage?

also getting this issue after upgrading to gatsby `^3.2.0-next.0` — Phil, Mar 16 '21 at 05:51

Ferran Buireu · Accepted Answer · 2021-03-16T14:29:08.317

1

As you can see from the docs about the new Gatsby Plugin Image:

Restrictions on using StaticImage

The images are loaded and processed at build time, so there are restrictions on how you pass props to the component. The values need to be statically-analyzed at build time, which means you can’t pass them as props from outside the component, or use the results of function calls, for example. You can either use static values, or variables within the component’s local scope. See the following examples:

So, <StaticImage> component can't handle props nor function calls to receive the image. In your case, this should work:

import React from 'react'
import { StaticImage } from 'gatsby-plugin-image'

const Hero = ({ showPerson }) => {
  return (
    <header className="hero">
      {showPerson && <StaticImage src={`../assets/person.png`} className="hero-person" alt="person image" />}
    </header>
  )
}

export default Hero

Due to the similarity of your v2 approach, I would suggest using <GatsbyImage> rather than <StaticImage>, check it out to see if it fits your requirements.

For the migration issues, Gatsby has developed a codemod that handles all the GraphQL queries and the "old" gatsby-images, changing the needed queries and components. Once you've installed the plugins, just run:

npx gatsby-codemods gatsby-plugin-image

With that, the issue should be gone. If not, you can follow similar stack traces at:

It seems that the issue is related to the 3.2.0-next.0 version so another option is trying to downgrade (or upgrade if possible).

edited Mar 16 '21 at 14:29

answered Mar 16 '21 at 05:58

Ferran Buireu

28,630
6
39
67

2

StaticImage is perfectly fine here :) GatsbyImage is about programmatically generated data, e.g. if the image comes from the frontmatter. In this case the person has a path to a file, it's a one time use, so StaticImage is the way to go – LekoArts Mar 16 '21 at 12:51
Yes in this use-case I think you are right but the fact `StaticImage` can't get outer `props` leads me to use the `GatsbyImage` due to the similarity from the `v2` approach. – Ferran Buireu Mar 16 '21 at 13:52
What downvote? Indeed, I upvoted... Does the use of `GatsbyImage` fixed your issue? You can try to use directly ` – Ferran Buireu Mar 16 '21 at 14:36
1

The issue isnt with using `GatsbyImage` it's with `StaticImage` not working at all and any attempt, per the docs, the resulting error is the same. I get I can, and at the moment till `StaticImage` is resolved, will use `GatsbyImage` the docs outlining it and the issue should be raised in hopes it helps others and to see if anyone is able to get `StaticImage` to work and if so what are the use cases for it. – DᴀʀᴛʜVᴀᴅᴇʀ Mar 16 '21 at 14:40
Yes I will leave my answer here to to help someone in the same situation. I assume that the issue will be removed shortly in the new releases :) I'm glad you finally bypass it – Ferran Buireu Mar 16 '21 at 14:42
This isn't an issue in the package but user error. So using any version is fine – LekoArts Mar 16 '21 at 15:04
It's not in the roadmap of Gatsby's allowing to use props in StaticImage to bypass the current restrictions? Anyway, thanks for the useful insights, as usual @LekoArts – Ferran Buireu Mar 16 '21 at 15:10

Gatsby plugin image cannot read property 'startsWith'

1 Answers1