"Cannot read property 'type' of undefined" error when media array is empty

[JoshiiSinfield]

I'm using this project with Nuxt.

Upon component mounting my array of media is empty. I'm then populating it in the fetch method (i've tried beforeMount & mounted too).

Because the array is empty when mounting I'm getting

"Cannot read property 'type' of undefined"

Nuxt/Vue file to recreate:

<template>
  <div class="wrapper ">
    <div>
      <ul>
        <li
          v-for="(image, index) in lightboxMedia"
          :key="index"
          style="display: inline-block"
        >
          <img
            v-lazy="image.src || image.thumb"
            style="height: 150px"
            @click="openGallery(index)"
          >
        </li>
      </ul>
      <light-box ref="lightbox" :media="lightboxMedia" :show-light-box="false" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'Lightbox',
  components: {
  },
  fetch () {
    this.getURL().then((value) => {
      console.log(value)
      this.lightboxMedia.push(
        {
          src: value,
          thumb: value
        })
    })
  },
  data () {
    return {
      lightboxMedia: []
    }
  },
  methods: {
    openGallery (index) {
      this.$refs.lightbox.showImage(index)
    },
    getURL () {
      // Here to mimic an API call to retrieve img url.
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve('https://images.unsplash.com/photo-1617718875775-c5f9800b17fb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1868&q=80')
        }, 2000)
      })
    }
  },
  head: {
    title: 'Lightbox test'
  }
}
</script>
<style>
</style>

Any help would be much appreciated.

Cheers,
Josh

[imcvampire]

Could you send the full call stack in the developer tool?

[JoshiiSinfield]

Hi @imcvampire ,

Thanks. here it is:

TypeError: Cannot read property 'type' of undefined
    at Proxy.i (webpack-internal:///./node_modules/vue-image-lightbox/dist/vue-image-lightbox.min.js:2)
    at VueComponent.Vue._render (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3542)
    at VueComponent.updateComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4049)
    at Watcher.get (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4473)
    at new Watcher (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4462)
    at mountComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4067)
    at VueComponent.Vue.$mount (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8405)
    at init (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3115)
    at createComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5968)
    at createElm (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5915)
_callee$ @ client.js?06a0:97

[imcvampire]

The vue-image-lightbox is minified :-( Could you provide a simple reproduction?

[JoshiiSinfield]

HI @imcvampire ,

I've provided the file to recreate it in the opening comment.

If you create a new demo nuxt app, add that template and run it up it'll work.. I can do it & deploy somewhere if necessary?

Cheers,
Josh

[imcvampire]

The file in the opening cmt seems wrong because you haven't imported vue-image-lightbox?

[JoshiiSinfield]

Apologies @imcvampire
I forgot to mention that I install it as a global component:

plugins/vue-image-lightbox.js

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
import LightBox from 'vue-image-lightbox'
require('vue-image-lightbox/dist/vue-image-lightbox.min.css')

Vue.use(VueLazyLoad)
Vue.component('light-box', LightBox)

then i add it to plugins array within nuxt.config.js using:

{ src: '~/plugins/vue-image-lightbox.js', ssr: false },

[imcvampire]

Do you use vue 2 or vue 3?

[cnhuye]

I have same error, finally I found this happened when media is empty array.
so i add v-if="imagelist.length > 0" , fixed the error.

[ziyyaad-anthony]

Hi @imcvampire, is this supported in Vue 3?

[imcvampire]

@ziyyaad-anthoziy I think it should

[ziyyaad-anthony]

vue-image-lightbox.min.js?5dec:2 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.i (vue-image-lightbox.min.js?5dec:2:1)
at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:890:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5602:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5716:1)
at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5730:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:5512:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:5470:1)
at patch (runtime-core.esm-bundler.js?d2dd:5060:1)
at mountChildren (runtime-core.esm-bundler.js?d2dd:5256:1)

Ran into this error and based on the Stackoverflow post below thought it was not supported

https://stackoverflow.com/questions/72180355/error-using-vue-carousel-uncaught-in-promise-typeerror-cannot-read-propertie