CODEWITHSUNDEEP
vue.jswebpackvuejs2flickityvue-flickity
Tom
Tom

Reputation: 6004

VueJS + Vue-Flickity TypeError: WEBPACK_IMPORTED_MODULE_0_vue_flickity.a is not a constructor

I'm using Vue-Flickity and I can't find a fix for this error:

[Vue warn]: Error in nextTick: "TypeError: WEBPACK_IMPORTED_MODULE_0_vue_flickity.a is not a constructor"

found in

---> at src/components/Meetup/Meetups.vue at src/App.vue vue.esm.js?efeb:1841 TypeError: WEBPACK_IMPORTED_MODULE_0_vue_flickity.a is not a constructor at VueComponent.eval (Meetups.vue?41ab:1113) at Array.eval (vue.esm.js?efeb:1938) at flushCallbacks (vue.esm.js?efeb:1857)

Here is the related code: HTML

<flickity ref="flickity" :options="flickityOptions">
<div class="carousel-cell">
<span>1</span>
</div>
</flickity>

SCRIPT

import Flickity from 'vue-flickity'
export default {
  components: {
    Flickity
  },
  data () {
    return {
      flickityOptions: {
        dragThreshold: 20,
        initialIndex: 1,
        selectedAttraction: 0.2,
        friction: 0.8,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: false,
        hash: true,
        percentPosition: false
      },
[...]
      mounted () {
        this.$nextTick(() => {
          const flkty = new Flickity(this.$refs.flickity, this.flickityOptions)
          // EVENTS
          flkty.on('ready', function () {
            console.log('Flickity is ready!')
          })
          flkty.on('dragStart', function () {
            console.log('dragStart')
          })

I updated all NPM packages but the error remains. How to fix it?

Upvotes: 0

Views: 889

Answers (1)

ittus
ittus

Reputation: 22403

Because you import Flickity as Vue component

import Flickity from 'vue-flickity'

then you can't create new instance of it like

const flkty = new Flickity(this.$refs.flickity, this.flickityOptions)

Please try

  mounted () {
    this.$nextTick(() => {
      // EVENTS
      this.$refs.flickity.on('ready', function () {
        console.log('Flickity is ready!')
      })
      this.$refs.flickity.on('dragStart', function () {
        console.log('dragStart')
      })
    })
  }

Upvotes: 1

Related Questions