TypeError Cannot read property 'length' of undefined

[leoliu]

I am getting a crash in production: TypeError Cannot read property 'length' of undefined

Here is the function corresponding to the minified version in the crash:

    function show(index, gallery) {
        if (!isOverlayVisible && index >= 0 && index < gallery.length) {
            prepareOverlay(gallery, options);
            showOverlay(index);
            return true;
        }
        if (index < 0) {
            if (options.animation) {
                bounceAnimation('left');
            }
            return false;
        }
        if (index >= imagesElements.length) {
            if (options.animation) {
                bounceAnimation('right');
            }
            return false;
        }

        currentIndex = index;
        loadImage(currentIndex, function() {
            preloadNext(currentIndex);
            preloadPrev(currentIndex);
        });
        updateOffset();

        if (options.onChange) {
            options.onChange(currentIndex, imagesElements.length);
        }

        return true;
    }

Browser:

Mozilla/5.0 (Linux; Android 7.1.1; ASUS_X00DDA Build/NMF26F; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.158 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/183.0.0.57.75;]

[feimosi]

I agree, there's definitely something wrong with the first if when showNextImage is called programmatically.

[leoliu]

BTW, the crash is purely from user interactions since I don't call showNextImage in my code. The report was then sent back by sentry.

[feimosi]

That doesn't make sense as isOverlayVisible should be equal to false here: https://github.com/feimosi/baguetteBox.js/blob/dev/src/baguetteBox.js#L608 Therefore the gallery should be hidden and a user has no way to interact with it. Could you debug it further?

[leoliu]

Maybe ignore my comment. I have been trying to debug this but unable to because I can't trigger the error myself.

[feimosi]

I'm quite busy these days, but I'll try to debug it myself when I have some time.

[unexceptable]

I'm actually hitting this when I have more than one gallery on the page. All galleries will load fine, and will open the baguettebox, but only the first gallery arrows will respond to click, while the others will throw errors. Oddly enough, arrow keys appear to work for all galleries.

The error (with unminified js):

VM1453 baguetteBox.js:632 Uncaught TypeError: Cannot read property 'length' of undefined
    at show (VM1453 baguetteBox.js:632)
    at showNextImage (VM1453 baguetteBox.js:601)
    at HTMLButtonElement.nextButtonClickHandler (VM1453 baguetteBox.js:87)
show @ VM1453 baguetteBox.js:632
showNextImage @ VM1453 baguetteBox.js:601
nextButtonClickHandler @ VM1453 baguetteBox.js:87

and what my template looks like (the actual code can be derived easily):

{% load static wagtailimages_tags core_tags %}

<link rel="stylesheet" href="{% static 'gallery/css/baguetteBox.css' %}"/>

{% random_id as gallery_id %}
<div id="gallery-{{ gallery_id }}" class="gallery-container row">
  {% for img in value.images %}
    {% image img.image fill-600x500 as img_thumb %}
    {% image img.image original as img_original %}
    <div class="col-md-3 gallery-thumbnail-container">
      <div class="card mb-3 shadow-sm">
        <a href="{{ img_original.url }}">
          <img src="{{ img_thumb.url }}" alt="{{ img_thumb.alt }}" class="gallery-thumbnail card-img">
        </a>
        <link rel="preload" href="{{ img_original.url }}">
      </div>
    </div>
  {% endfor %}
</div>

<!-- <script src="{% static 'gallery/js/baguetteBox.min.js' %}"></script> -->
<script src="{% static 'gallery/js/baguetteBox.js' %}"></script>
<script type="text/javascript">
  baguetteBox.run('#gallery-{{ gallery_id }}');
</script>