Cannot read properties of undefined (reading 'height')

[vishal-ranjan-codes]

Description

I am getting this error in my next.js 14 project -

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'height')

Call Stack
Zoom.getDragAllowedAxises
node_modules\lightgallery\plugins\zoom\lg-zoom.es5.js (175:0)
HTMLDivElement.eval
node_modules\lightgallery\plugins\zoom\lg-zoom.es5.js (914:0)

Steps to reproduce

When I zoom-in by double-clicking a few times, I get this error.

JS code that you use to initialize lightGallery.

The component -

"use client";
import LightGallery from 'lightgallery/react';
import lgZoom from 'lightgallery/plugins/zoom';
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-thumbnail.css';
import Image from "next/image";

interface LightBoxImageProps {
    className: string;
    src: string;
    alt: string;
    width: number;
    height: number;
}

const LightBoxImage: React.FC<LightBoxImageProps> = ({ className, src, alt, width, height }) => {
  return (
    <LightGallery speed={500} plugins={[lgZoom]} >
        <a className="cursor-zoom-in" href={src}>
            <Image className={className} src={src} alt={alt} width={width} height={height}/>
        </a>
    </LightGallery>
  )
}

export default LightBoxImage

Sample HTML markup

<div className="project-media-block">
  <LightBoxImage className="theme-br-b" src={'/Localizer - Information Architecture.webp'} alt="Localizer Journey Mapping" width={1400} height={1120}/>
</div>

Environment

• Browser and version - Chrome - latest
• OS - Windows 10
• lightGallery version - 2.7.2

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.