Gatsby plugin image cannot read property 'startsWith'

user_1952287 0
Viewed 2069

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?

gatsby-image gatsby reactjs javascript
1 Answers

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).

user_55853710
Related