The issue with the vue-carousel arises from an uncaught TypeError in which it is unable to read properties of undefined while trying to access '_c'. This problem occurs within the vue-carousel.min.js file

I encountered an error when using the Carousel component from the plugin. The error message is as follows:

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>

You can find the code on GitHub for review: https://github.com/camidesarrollo/ecommers-vyp

Answer №1

Based on the information provided in the vue carousel documentation, it seems that the syntax import Vue from 'vue' is specific to version 2 of the Vue framework. Your main.js file, which contains the line import { createApp } from 'vue', suggests that you are using version 3 of Vue. This inconsistency may indicate that vue carousel is not compatible with version 3. To resolve this issue, consider reverting to Vue version 2 and follow the code examples below:

Main.js file:

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

To implement a Carousel component, create a new file named Carousel.vue instead of Carousel.js:

Carousel.vue:

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

<script>
export default {
  name: "CustomSlider",
  /* Include additional code based on the documentation here.  */
}
</script>

<style scoped>

</style>

It's advisable to use a unique name for your component instead of carousel, as it could clash with the built-in vue-carousel component and lead to conflicts within your code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to display a price near a whole number without using decimal points

Currently, I am working on an ecommerce project where the regular price of an item is $549. With a discount of 12.96% applied, the sale price comes down to $477.8496. However, I want the sale price to be displayed as either $477 or $478 for simplicity. Yo ...

Utilize Vue-svg-inline-loader to send props and transform an image into svg format in Vue applications

Currently, I am utilizing the vue-svg-inline-loader In my initial component, I pass the source of the SVG image as a prop: <IconComponent :imgIcon="'../../assets/img/icon-example.svg'" /> Then, in my second component, I receive this prop ...

How can you use Vue.js @mouseover to target a specific <path> element within an <svg>?

Check out this Codepen example. I am working with an SVG map that contains various paths holding data. My goal is to retrieve the state name when hovering over a specific path. Currently, I have added an event listener to the svg element and am trying to ...

State change shows the previous and current values simultaneously

I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected. Essentially, entriesNum receives a number as an event and changes th ...

The intended functionality of clicking on an image is exclusively reserved for its immediate parent element

I have a feature on my website that displays an image gallery. When a user clicks on an image, it opens up the image in full screen similar to Facebook's theatre mode. I have written code so that when the user clicks anywhere in the container of the i ...

I am currently exploring next.js and working on creating a dedicated single post page within my project

I am currently working with Next.js and fetching some dummy data on the homepage. However, I am facing an issue when trying to create a separate page for each post obtained from the homepage. Although I have already coded it, I feel like there is room fo ...

Challenges with implementing singleSelect feature in MUI-X DataGrid

Encountering an issue with the singleSelect type on the community version of x-data-grid. The problem arises when attempting to edit a row, where my singleSelect consists of the following data set. Here is how I have configured my DataGrid setup. Although ...

Is there a way to replicate input data from one website onto a totally separate platform?

I am currently working on a hotel website using the user-friendly WYSIWYG site builder, Wix (yes, I know, don't judge). Like all hotel websites, we need a form for customers to enter their details for reservations and other purposes. However, there&a ...

By using Yii2, you can pass an id to the URL by simply clicking on a

I am struggling with sending the post_id from a div containing text content (retrieved from a database) to a URL in order to render a view page displaying the entire content. I am using Yii2 and believe I need to use JavaScript for this task, but I am unsu ...

Tips for accessing the page title within watch:$route in Nuxt/Vue

In my Nuxt/Vue based application, I am able to access the name and path of the route using this.$route or watch:$route, but strangely the meta information is not available. For example, I have a page called Foo: export default { ... head(){ ...

Issues with javascript and php carousel functionality not performing correctly

I am currently in the process of creating a slideshow/carousel for a website. Recently, I implemented a PHP for-loop to iterate through a folder of images, allowing me to use the slideshow with an unspecified number of images. However, after making this ch ...

Preserving the "height" declaration in jQuery post-Ajax request (adjusting height after dropdown selection loads product information, resetting heights of other page elements)

Looking for a way to set a height on product descriptions using jQuery? Check out the solution below: https://www.example.com/product-example Here is the code snippet that can help you achieve this feature: $(document).ready(function() { var $dscr = $ ...

What is the best way to initiate a class constructor with certain parameters left out?

Currently, I am facing a challenge while trying to pass various combinations of arguments to a class constructor. The constructor has 2 optional arguments. Here is the code snippet: class MyClass { foo(a, b) { return new MyClass(a, b); } bar( ...

Obtain the unique identifier for every row in a table using jQuery

Apologies for not including any code, but I am seeking guidance on how to use an each() statement to display the ID of each TR element. $( document ).ready(function() { /* Will display each TR's ID from #theTable */ }); <script src="https:// ...

Dynamic jQuery URL truncater

Is there an on-the-fly URL shortener similar to Tweetdeck available? I have come across several jQuery and JavaScript plugins that can shorten a URL through services like bit.ly when a button is clicked. However, I am looking for one that shortens URLs aut ...

The rows in the React table are refusing to change color despite the styles being applied; instead, they are coming back

Hey there, Green Dev here! I've been working on a React table where I'm trying to conditionally change the row color. The styles are being passed in, but for some reason they return as undefined. Strangely enough, when I remove my logic and simpl ...

Encountered an issue while attempting to import a package in ES6: 'Module specifier "vue" could not be resolved'

As I dive into Vue tutorials, I find myself facing a challenge in importing Vue into a .js file and then linking this file to my index.html. The script importation in my index.html looks like this: <script src="./js/main.js" type="module"></scrip ...

Tips for properly formatting Sequelize association fetching in your application

I am dealing with an association many-to-many between two tables, products and orders. In the pivot table, I store the product's id, quantity, and price. However, when fetching the product, I also require the product name which can only be retrieved f ...

Preventing touchstart default behavior in JavaScript on iOS without disrupting scrolling functionality

Currently experimenting with JavaScript and jQuery within a UIWebView on iOS. I've implemented some javascript event handlers to detect a touch-and-hold action in order to display a message when an image is tapped for a certain duration: $(document) ...

Modifying CSS property values by handling a returned validation error

Allow me to describe a scenario I've created. Please excuse any language errors in my explanation. I have designed a form for users to submit values. Within this form, users can choose an option - one of which is "Others specify...". When this option ...