reactjs - Gatsby-image-background-slider triggers TypeError: Cannot read property 'style' of undefined

Question

I use gatsby-image-background-slider on my project and it triggers TypeError: Cannot read property 'style' of undefined changeIndex src/index.js:111 callback src/index.js:129.

The same hero worked initially, but during the development, it started giving this error. I have reinstalled packages, tried with a new hello-world-project with the same code.

    Hero.js

    import React from "react"
    import { useStaticQuery, graphql } from "gatsby"
    import BackgroundSlider from 'gatsby-image-background-slider'
    
    const Hero = ({ children }) => (
      <>
        <main>{children}</main>
        <BackgroundSlider
          query={useStaticQuery(graphql`
            query {
              backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
                nodes {
                  relativePath
                  childImageSharp {
                    fluid (maxWidth: 4000, quality: 100){
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          `)}
          initDelay={2}
          transition={4}
          duration={8}
          images={["picture2.jpg", "picture2.jpg"]}
        >
        </BackgroundSlider>
      </>
    )
    
    export default Hero

Do you know what could be causing this?

question from:https://stackoverflow.com/questions/65652028/gatsby-image-background-slider-triggers-typeerror-cannot-read-property-style

Answer 1

As it's inferred from the documentation (and from other examples), it seems that adding initDelay, transition or duration props is forcing the component to receive also style props. Since you are not passing it, it breaks the dependency code.

If you don't plan to add any style property, you can simply use a dummy styling such as:

    <BackgroundSlider
      query={useStaticQuery(graphql`
        query {
          backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
            nodes {
              relativePath
              childImageSharp {
                fluid (maxWidth: 4000, quality: 100){
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      `)}
      initDelay={2}
      transition={4}
      duration={8}
      style={{`display: initial`}}
      images={["picture2.jpg", "picture2.jpg"]}
    >
    </BackgroundSlider>

---

Since the plugin is low-maintained and doesn't expose better examples, I would suggest using a custom <div> structure within gatsby-background-image plus another carousel dependency, such as React Slick Slider. Something like:

const SimpleSlider=()=> {
  const data = useStaticQuery(graphql`
      query {
          backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
              nodes {
                  relativePath
                  childImageSharp {
                      fluid (maxWidth: 4000, quality: 100){
                          ...GatsbyImageSharpFluid
                      }
                  }
              }
          }
      }
  `)

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  return <div>
      <h2> Single Item</h2>
      <Slider {...settings}>
        { backgrounds.nodes.map(background =>{
            return <BackgroundImage
              Tag="section"
              className={`yourClassName`}
              fluid={background.childImageSharp.fluid}
              backgroundColor={`#040e18`}
              style={{`height:100%; width:100%`}}
            />
          })}
      </Slider>
    </div>
}

Note that without a sandbox, you may need to adapt a little bit of the snippet, especially with the styles prop, but you get the idea.