CODEWITHSUNDEEP
javascriptvue.js
camiboo
camiboo

Reputation: 1

Error using vue-carousel: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.r (vue-carousel.min.js)

When I use the Carousel component of the plugin I get the following error

vue-carousel.min.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.r (vue-carousel.min.js:6:29067) at renderComponentRoot (runtime-core.esm-bundler.js:895:44) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5059:57) at ReactiveEffect.run (reactivity.esm-bundler.js:185:25) at setupRenderEffect (runtime-core.esm-bundler.js:5185:9) at mountComponent (runtime-core.esm-bundler.js:4968:9) at processComponent (runtime-core.esm-bundler.js:4926:17) at patch (runtime-core.esm-bundler.js:4518:21) at mountChildren (runtime-core.esm-bundler.js:4714:13) at mountElement (runtime-core.esm-bundler.js:4623:17)

package.json  ->     "vue-carousel": "^0.18.0",

*---------------------------------------------------------------------------------------------*

main.js 
import { createApp } from 'vue'
import store from './store'
import router from './router'
import './index.css'
import App from './App.vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret)

import { Carousel, Slide } from "vue-carousel";


createApp(App)
  .use(store)
  .use(router)
  .use(library)
  .mount('#app')
*---------------------------------------------------------------------------------------------*
Carousel.js

<template>
  <div>
    <carousel>
    </carousel>
  </div>
</template>

<script>
import { Carousel, Slide } from "vue-carousel";
export default {
  components: {
    Carousel,
    Slide,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      perPage: 4,
      selectedIndex: 0,
    };
  },
  computed: {
    slides() {
      return Array.from(Array(10).keys()).map((item) => item + 1);
    },
  },
  methods: {
    slideClick(index) {
      console.log("Slide index: ", index);
    },
    handleButtonClick(index) {
      const maxIndexAbleClick = this.slides.length - this.perPage;
      this.selectedIndex =
        index <= maxIndexAbleClick ? index : maxIndexAbleClick;
      console.log("new index", this.selectedIndex);
    },
  },
  setup() {},
};
</script>

attached is the git so you can review the code https://github.com/camidesarrollo/ecommers-vyp

Upvotes: 0

Views: 3189

Answers (1)

hamid-davodi
hamid-davodi

Reputation: 1966

I'm not sure, but from vue carousel documentation you can see that it uses import Vue from 'vue' syntax that is for version 2 of Vue framework. From your main.js file that has import { createApp } from 'vue' inside it, I can guess that you used version 3 of Vue framework. So maybe vue carousel is not compatible to version 3. If you want you can use it with Vue version 2 that I tested and has no error like the codes below:

main.js file:

/* ... other codes of your project */
import Vue from 'vue';
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);
/* other codes of your project ... */

Then you can create a Carousel.vue and not Carousel.js file like below:

Carousel.vue:

<template>
  <div>
    <carousel>
      <slide>
        Slide 1 Content
      </slide>
      <slide>
        Slide 2 Content
      </slide>
    </carousel>
  </div>
</template>

<script>
export default {
  name: "CarouselCompo",
  /* Add other codes according to documentation here.  */
}
</script>

<style scoped>

</style>

Also I think it is better to choose another name for your component and not use carousel as name, because carousel is a built-in component of vue-carousel and may cause conflict to your codes.

Upvotes: 1

Related Questions