Import ModifiersPlugin Webpack

[tsimenis]

Hi everyone, 

 

I am using the modifiers plugin alongside other gsap plugins. 

During development everything works fine but when I build my project I get this error:

 

invalid modifiers tween value: [object Object]

 

This is how I am importing the plugin:

 

import {TweenLite, TweenMax, Linear} from 'gsap'
import '@/assets/vendor/ThrowPropsPlugin'
import Draggable from 'gsap/Draggable'
import 'gsap/ModifiersPlugin'

 

Any help would be appreciated

 

 

[Rodrigo]

Hi,

 

Without more info about other libraries/frameworks you're using, my guess is that you're using webpack or a CLI that uses webpack for the build process. So perhaps this has to do with tree shaking:

 

https://greensock.com/docs/NPMUsage

 

Scroll down a bit and you'll find the tree shaking part.

 

If this doesn't help, please provide more details about what you're doing, your setup and perhaps a reduced live sample or a setup file to take a look in our local environments for testing.

 

Happy Tweening!!

[tsimenis]

Hi @Rodrigo,

 

thank you for your reply, I am using Vuejs and the project is created with Vue CLI 3 (webpack).

 

You are actually right, it seems it has to do with tree shaking, I didn't think of it since I didn't have this issue before.

 

So I got it working with two ways, the important part seems to be to reference the plugin in your code

 

import Draggable from 'gsap/Draggable'
import '@/assets/vendor/ThrowPropsPlugin'
import ModifiersPlugin from 'gsap/ModifiersPlugin'
import {TweenLite, TweenMax, Linear} from 'gsap'

//or according to the docs
import '@/assets/vendor/ThrowPropsPlugin'
import {TweenLite, TweenMax, Linear, ModifiersPlugin, Draggable} from 'gsap/all'


// mounted hook
const plugins = [ModifiersPlugin]

 

It feels it's not the prettiest solution but I guess it's the only one

 

thanks a lot for your help!