TypeError: undefined is not an object (evaluating 't.addEventListener')

[mikebronner]

I'm getting the following error during page-load:

[Vue warn]: Error in mounted hook: "TypeError: undefined is not an object (evaluating 't.addEventListener')"

found in

---> <Lightbox> at src/components/LightBox.vue
       <Root>

Here's how I am rendering it out:

import LazyLoad from 'vue-lazyload';
import Lightbox from 'vue-image-lightbox';
Vue.use(LazyLoad);
Vue.component("lightbox", Lightbox);

    data: function () {
        return {
            lightboxImages: [],
        };
    },

            <lightbox ref="lightbox" :images="lightboxImages" :show-light-box="false" :show-caption="true"></lightbox>

It appears to have to do with this line:

    const hammer = new Hammer(this.$refs.container)

where this.$refs.container is undefined. Updating this to the following seems to have worked:

    if (this.$refs.container || false) {
        console.log(this.$refs);
        const hammer = new Hammer(this.$refs.container)

        hammer.on('swiperight', () => {
          this.previousImage()
        })

        hammer.on('swipeleft', () => {
          this.nextImage()
        })
    }

Any thoughts on what may be causing this? It seems to work fine; but I need to clear any errors from the console. Thanks! :)

[eliran-arkabi]

Have the same problem

[olivebeto56]

Me too

[pexea12]

I am working on it

[pexea12]

I have already fixed the issue with @mikebronner suggestions. I think the problem is that your images are fetched at run time, and this process makes $refs.container undefined.

<div @click.stop="closeLightBox">
  <div
    class="vue-lb-container"
    v-show="lightBoxOn"
    v-if="images && images.length > 0"
    ref="container"
  >

Version 6.0.1 has already been deployed on npm.