CODEWITHSUNDEEP
reactjslightboxreact-springbootstrap-lightbox
kw5
kw5

Reputation: 11

Undefined properties when reading img in react-spring-lightbox

I am trying to use the react-spring-lightbox to make a lightbox image carousel. I followed the documentation example here, but I get an error: Cannot read properties of undefined (reading 'img') at ./node_modules/react-spring-lightbox/dist/index.cjs.js. I don't know what is undefined, because I don't think there is anything called img, or why the given documentation code isn't working.

I have tried to edit the list of images, and it is not working. I've also tried console logging stuff that isn't showing up because it errors immediately. This is the code:

import { useState } from "react";
import Lightbox from "react-spring-lightbox";

const images = [
  {
    src: "https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg",
    loading: "lazy",
    alt: "Windows 10 Dark Mode Setting",
  },
  {
    src: "https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png",
    loading: "lazy",
    alt: "macOS Mojave Dark Mode Setting",
  },
  {
    src: "https://timellenberger.com/static/blog-content/dark-mode/android-9-dark-mode.jpg",
    loading: "lazy",
    alt: "Android 9.0 Dark Mode Setting",
  },
];

function PhotoLightbox() {
  const [currentImageIndex, setCurrentIndex] = useState(0);

  const gotoPrevious = () =>
    currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);

  const gotoNext = () =>
    currentImageIndex + 1 < images.length &&
    setCurrentIndex(currentImageIndex + 1);

  console.log(images);

  return (
    <Lightbox
      isOpen={true}
      onPrev={gotoPrevious}
      onNext={gotoNext}
      images={images}
      currentIndex={currentImageIndex}
      /* Add your own UI */
      // renderHeader={() => (<CustomHeader />)}
      // renderFooter={() => (<CustomFooter />)}
      // renderPrevButton={() => (<CustomLeftArrowButton />)}
      // renderNextButton={() => (<CustomRightArrowButton />)}
      // renderImageOverlay={() => (<ImageOverlayComponent >)}

      /* Add styling */
      // className="cool-class"
      // style={{ background: "grey" }}

      /* Handle closing */
      // onClose={handleClose}

      /* Use single or double click to zoom */
      // singleClickToZoom

      /* react-spring config for open/close animation */
      // pageTransitionConfig={{
      //   from: { transform: "scale(0.75)", opacity: 0 },
      //   enter: { transform: "scale(1)", opacity: 1 },
      //   leave: { transform: "scale(0.75)", opacity: 0 },
      //   config: { mass: 1, tension: 320, friction: 32 }
      // }}
    />
  );
}

export default PhotoLightbox;

and this is the full error:

Cannot read properties of undefined (reading 'img')
TypeError: Cannot read properties of undefined (reading 'img')
    at ./node_modules/react-spring-lightbox/dist/index.cjs.js (http://localhost:3000/static/js/bundle.js:48763:32)
    at options.factory (http://localhost:3000/static/js/bundle.js:68990:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:68435:33)
    at fn (http://localhost:3000/static/js/bundle.js:68647:21)
    at ./src/components/PhotoLightbox.jsx (http://localhost:3000/static/js/bundle.js:440:79)
    at options.factory (http://localhost:3000/static/js/bundle.js:68990:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:68435:33)
    at fn (http://localhost:3000/static/js/bundle.js:68647:21)
    at ./src/components/sections/Gallery.jsx (http://localhost:3000/static/js/bundle.js:870:72)
    at options.factory (http://localhost:3000/static/js/bundle.js:68990:31)

any ideas on how to debug this?

Upvotes: 0

Views: 57

Answers (1)

Mayani Sumit
Mayani Sumit

Reputation: 26

Its working on downgrade version and in latest version is bug and their demo is on 1.6.0

downgrade version of 1.8.0 to 1.6.0

link of their official document of github

Upvotes: 0

Related Questions