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

user_14976519 0
Viewed 304

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?

gatsby reactjs
1 Answers

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.

user_55853710
Related