CODEWITHSUNDEEP
javascriptwebpackvuejs2flickity
Tyler Bean
Tyler Bean

Reputation: 437

Flickity via webpack returning different result

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.

Upvotes: 3

Views: 228

Answers (1)

Mosè Raguzzini
Mosè Raguzzini

Reputation: 15841

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)

Upvotes: 1

Related Questions