vue slick carousel Uncaught (in promise) TypeError: this.$slots.default is undefined

Question

hello I want to add in vue component a carousel with vue slick carousel like this

<vue-slick-carousel
          v-if="groupOne && groupOne.length > 0"
          v-bind="settings"
        >
          <component
            :is="picture.template"
            v-for="picture in groupOne"
            :key="picture.title"
            :params="picture"
            :size="params.size"
            @click="onClick(picture)"
          />
        </vue-slick-carousel>
<script>
import 'vue-slick-carousel/dist/vue-slick-carousel.css';
export default{
 components: {
    VueSlickCarousel: () => import('vue-slick-carousel'),
}
data() {
    return {
      settings: {
        arrows: true,
        slidesToShow: 1,
        lazyLoad: 'ondemand',
        autoplay: true
      }
    };
  },
}
</script>

is don't work i have this error in my console

Uncaught (in promise) TypeError: this.$slots.default is undefined

Please help me!

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2021-07-07T06:01:02

It seems that the issue comes from the dynamic import, try to use normal import like :

<vue-slick-carousel
          v-if="groupOne && groupOne.length > 0"
          v-bind="settings"
        >
          <component
            :is="picture.template"
            v-for="picture in groupOne"
            :key="picture.title"
            :params="picture"
            :size="params.size"
            @click="onClick(picture)"
          />
        </vue-slick-carousel>
<script>
import 'vue-slick-carousel/dist/vue-slick-carousel.css';
import VueSlickCarousel from 'vue-slick-carousel'

export default{
 components: {
    VueSlickCarousel
},
data() {
    return {
      settings: {
        arrows: true,
        slidesToShow: 1,
        lazyLoad: 'ondemand',
        autoplay: true
      }
    };
  },
}
</script>

vue slick carousel Uncaught (in promise) TypeError: this.$slots.default is undefined

2 Answers