VueJS + Vue-Flickity TypeError: WEBPACK_IMPORTED_MODULE_0_vue_flickity.a не является конструктором

Question

Я использую Vue-Flickity , и я не могу найти исправление для этой ошибки:

[Vue warn]: Ошибка в nextTick: "TypeError: WEBPACK_IMPORTED_MODULE_0_vue_flickity .a не является конструктором "

найдено в

---> в src / components / Meetup / Meetups.vue в src / App.vue vue.esm.js? efeb: 1841 Ошибка типа: WEBPACK_IMPORTED_MODULE_0_vue_flickity .a не является конструктором в VueComponent.eval (Meetups.vue? 41ab: 1113) в Array.eval (vue.esm.js? efeb: efe: efeflushCallbacks (vue.esm.js? efeb: 1857)

Вот соответствующий код: 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')
          })

Я обновил все пакеты NPM, но ошибка остается.Как это исправить?

Answer 1

Поскольку вы импортируете Flickity как компонент Vue

import Flickity from 'vue-flickity'

тогда вы не можете создать новый экземпляр этого типа

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

Пожалуйста, попробуйте

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