Cannot read properties of undefined (reading 'prevArrow')

[ArkoxHub]

I just installed this component into my project and I have this error when trying to show up the basic example of the main website

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'prevArrow') vue-slick-carousel.umd.js:10810 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'prevArrow')

Any idea whats wrong? I'm using Vue 3

[GuchiRey]

Me too!!! :(

[Ahmedreda20]

Same issues happened with me too!! :(

[aaronmorillo7]

Hello everybody! I have the same issue, I'm using Vue 3 and I would like to know how to resolve it or if it is a compatibility issue with Vue 3.

[Ahmedreda20]

M

Hello everybody! I have the same issue, I'm using Vue 3 and I would like to know how to resolve it or if it is a compatibility issue with Vue 3.

Try to use nuxtjs instead of vue 2 or 3 just did that and worked as well

[smarques]

Same issue here, on vue 3.

[shaked007]

same issue over here...

[ricepower]

same issue over here toooooo

[fanzhengshao]

same issue over here toooooo Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')

[gijshoppen]

saaame

[Yubo0826]

same :( Any1 have solution?

[thejawadali]

having the same issue as well

[abuzaid-sayyad]

same issue

[Wil-Script]

same for me, i use vuejs 3. anyone have a solution?

[zarpio]

Same issue with laravel, vue js, inertia js

[kinger251285]

Me too, Laravel 8, Jetstream, Inertia, Vue 3

[jonasalberttan]

same issue here...

[sebastian-reynoso]

same issue here after migrate :(

[ayman-alshantaf]

same issue here ...😑 what is the solution to this problem??

[maninak]

I don't know if this is related or not, but since I've found a work-around for a similar issue with vue-slick-carousel and nuxt.js v2 here's my 2 cents:

The specific error I was getting was

TypeError: Cannot read properties of undefined (reading 'length')

I don't know why I wasn't getting it until now and which specific change in my source code started triggering it (I didn't change the lib version for sure, though), but I've been getting this error every time I would change page and the component was about to be destroyed.

I practically worked around it, by killing the component before it has a chance to crash.

// BaseSlider.vue

<template>
  <div>
    <div class="mb-6">
-       <VueSlickCarousel v-bind="vueSlickCarouselConfig" ref="sliderEl" :arrows="false">
+       <VueSlickCarousel v-if="$slots.default && $slots.default.length" v-bind="vueSlickCarouselConfig" ref="sliderEl" :arrows="false">
        <slot></slot>
      </VueSlickCarousel>
    </div>
    <div class="flex flex-row gap-3">
      <button @click="showPrev">
        <NuxtImg
          src="/img/icons/prev.svg"
          width="40"
          height="40"
          loading="lazy"
          decoding="async"
          alt="arrow pointing left"
          class="select-none"
        />
      </button>
      <button @click="showNext">
        <NuxtImg
          src="/img/icons/next.svg"
          width="40"
          height="40"
          loading="lazy"
          decoding="async"
          alt="arrow pointing right"
          class="select-none"
        />
      </button>
    </div>
  </div>
</template>

<script lang="ts">
const vueSlickCarouselConfig = {
  infinite: false,
  speed: 600,
  variableWidth: false,
  adaptiveHeight: false,
  autoplay: false,
  slidesToScroll: 1,
  swipeToSlide: true,
  slidesToShow: 3,
  responsive: [
    { breakpoint: 1280, settings: { slidesToShow: 2 } },
    { breakpoint: 640, settings: { slidesToShow: 1 } },
  ],
}

export default defineComponent({
  setup() {
    const sliderEl = ref()

    function showPrev() {
      sliderEl.value?.prev()
    }

    function showNext() {
      sliderEl.value?.next()
    }

    return { vueSlickCarouselConfig, sliderEl, showPrev, showNext }
  },
})
</script>

[sarjid]

TypeError: Cannot read properties of undefined (reading 'prevArrow')

Using Vue3 .. Same problem

[mdhasanpatwary]

Vue3, same issue here ...😑

[sarjid]

Vue3, same issue here ...😑

at least iam using this package.. it's work in vue3 poperly .. https://ismail9k.github.io/vue3-carousel/examples.html#autoplay-example

[Hasnain-js]

Same, ive face this issue.What can i do..?

[salman3040]

same issue here ...😑 what is the solution to this problem??

[alfredthompsonOvie]

is there a solution to this error Cannot read properties of undefined (reading 'prevArrow')

[sarjid]

hey man. Just Use swiper slider.it's very easy to use. iam using it without any problem. https://swiperjs.com/vue https://swiperjs.com/demos#space-between

[sarjid]

use you can use swiper slider .. it's very easy man.. https://swiperjs.com/demos#space-between

On Tue, Sep 13, 2022 at 6:44 PM alfred thompson ovie < @.***> wrote:

is there a solution to this error Cannot read properties of undefined (reading 'prevArrow')

— Reply to this email directly, view it on GitHub https://github.com/gs-shop/vue-slick-carousel/issues/214#issuecomment-1245360010, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMWCZZQXU42YIHTERPI3QILV6BZKJANCNFSM5EUT6CYQ . You are receiving this because you commented.Message ID: @.***>

[Rehman-Ali]

same issue.

[onderakbulut]

same issue.

[mark1282]

Same issue

[Seeman13]

This is because the slot-scope construct has been removed in Vue3! In order to avoid this error, you need to replace:

settings.prevArrow = this.$scopedSlots.prevArrow
settings.nextArrow = this.$scopedSlots.nextArrow
settings.customPaging = this.$scopedSlots.customPaging

to

settings.prevArrow = this.$slots.prevArrow
settings.nextArrow = this.$slots.nextArrow
settings.customPaging = this.$slots.customPaging

in VueSlickCarousel.vue and rebuild package.

But this will not solve the problem of the slider! Since there will be another problem: "Component is missing template or render function". And the slider will simply not render! Since the package is built under Vue2 and cannot work with Vue3!

Forget about this package in Vue3! Use other alternatives!

[mirjalolinomjonov]

Same issues happened with me too!! :(

[abdallahmaali]

same issues

[motahharm]

I have this problem too!

[JosiaAlmeida]

I had this problem too, but, I solved

My dependencies: vue-slick-carousel: "^1.0.6, vue-slick-ts: "^1.1.0", nuxt: "^3.8.0", vue: "^3.3.4",

plugins/slick.ts

import { defineNuxtPlugin } from '#app'
import { ListSlickMethods, VueSlickCarousel } from "vue-slick-ts"; // 
import "vue-slick-carousel/dist/vue-slick-carousel.css";
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
import "vue-slick-ts/dist/css/slick.css";

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component("VueSlickCarousel", VueSlickCarousel)
})

[anurag-gautam-maersk]

TypeError: Cannot read properties of undefined (reading 'prevArrow')

Using Vue3 .. Same problem

[viethq-vareal]

using nuxt 3 same and having the same problem

[Kalips2]

Same issue! Please fix it already

[saidov-arb]

Same issue!