Webpack + gulp build

[torrfura]

This starter kit is awesome, I really like it and have been using it for quite a while now. However in this current project I'm doing, I'm using gsap / TweenLite. I kind of know that this depends on my own shortcomings, but i've really tried to google / search on other places before turning to you.

Everything works as expected while developing, using watch and just running gulp. But when I'm running gulp build, and refresh the browser, I get this error:

Uncaught TypeError: Cannot set property 'gsClass' of undefined

I've installed gsap through bower, and shimmed it like this in gulp/config/scripts.js

...
plugins: [
  new webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery',
    'window.jQuery': 'jquery',
    'TweenLite': 'gsap',
    // ...and more bower:ed plugins
  })
]
...

And using it in some of my ./scripts/*.js files like this:

import TweenLite from 'gsap';

As I mentioned, it works perfect while developing. Any help with this is greatly appreciated, eventhough I know this most likeley is my own fault somehow. But since I'm also using other "plugins" through bower, which work perfect even when running gulp build, I'm left hanging on this.

[Maximilianos]

Hey jose, really happy you are finding it useful :) Which version of the theme are you using? You should be able to check in the package.json or the bower.json If you are in a version before 4.1.5 you might want to apply this commit to your theme: https://github.com/MozaikAgency/wp-theme-starter/commit/be596cdd82a8c10bd80d245412f366ed4349e13a

[Maximilianos]

check out https://github.com/MozaikAgency/wp-theme-starter/pull/198

[torrfura]

I'm on 4.3.0, but just pulled the latest from this repo and tried with at "blank" theme, adding gsap to bower and the shimming and so forth.

No luck :(

I really appreciate all help I can get with this, sucks being stuck so deep in a project! I should've run more production build tests much earlier on. Lesson learned :)

I've zipped this up, and put it on dropbox. Is there any obvious mistake I've done?

If you just run gulp, and view it in the browser you'll see the hero credits animate. If you run gulp build you'll get the error.

[torrfura]

Gotcha! The issue seems to be with gsap being non amd, just tried using velocity.js and everything works just fine. Many thanks for your concern. I hate being a webdeveloper these days :) I just wanna build stuff.

If you have any thoughts on how to get gsap working with webpack, please give me a hint, otherwise feel free to delete this "issue", since it has nothing to do with this repo.

[torrfura]

I haven't really had time figure this out, and now I'm getting close to the parts in my project where I would really need gsap. I've been asking around, http://greensock.com/forums/topic/14387-webpack-gsap-error/, but this seems to be a really strange issue.

@Maximilianos could you please have a look? You know tons more than me about how the internals of this starter pack is setup... Would be really nice of you!

[torrfura]

I found the problem, it would be nice is someone with more webpack / node skills than me could verify.

It all has to do with the webpack UglifyJsPlugin, and the setting "pure_getters". When having this set to true, I get the error. There's no impact on .js size in the end, so I just removed the property.

But I cannot give any explanation to what lies beneath this problem.

[Maximilianos]

Hey @joseelsantos sorry we couldn't get to you before this. Well done on finding that one out and thanks! UglifyJsPlugin is just a webpack wrapper for UglifyJS and the settings it takes like pure_getters are UglifyJS things, so this is not a webpack thing but an UglifyJS + greensock thing. And as you found out, greensock doesn't seem to work when the pure_getter optimization is being applied.

I cannot contribute more as to why this might be happening, but you might have some luck on the greensock forum :)

Thanks again