3

I am installing Flickity using npm: npm i flickity. Flickity version is 2.2.0

Then I call and use like this:

import Flickity from 'flickity'
const flickity = new Flickity(el, options)
console.log(flickity)

I have checked the function Flickity and realize that it is minified after building via webpack, and it seems to return the different result for flickity object. Therefore, it causes the action/methods on flickity object to behave differently. Please see the attached screenshot below for better illustration:

Development environment:

This one is on development environment

Minified via webpack:

This one is minified via webpack

Could anyone give suggestions on what is wrong in my situation to fix this issue?

Update: One important piece of information I haven't mentioned is that flickity object is initialized inside a vue component. It might be the reason for this problem.

carousel.vue

import Flickity from 'flickity'
export default {
    data () {
        return { options } // options object
    }
    mounted () {
        this.instance = new Flickity(this.$el, this.options)
        console.log(this.instance)
    }
}

I am using vue 2.6.10. The result this.instance is different on the two environments as I stated above. I still need help on this issue.

Tyler Bean
  • 417
  • 1
  • 4
  • 14

1 Answers1

1

The right syntax is:

import Flickity from 'flickity';

EDIT: It seems to work correctly, take a look at my snippet (I've used a react template but also plain es6 should be fine)

Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
  • It seems to work correctly, take a look at my snippet (used a react template but also plain es6 should be fine) https://stackblitz.com/edit/react-h1zmrf – Mosè Raguzzini Dec 11 '19 at 09:35