Jump to content
GreenSock

Torrfura

Webpack + gsap error

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I have a problem using gsap through bower, compiled with webpack. My shim looks like this:

webpack: {
  defaults: {
    plugins: [
      new webpack.ProvidePlugin({
        ...
        '$': 'jquery',
        'TweenLite': 'gsap'
        ...
      })
    ],
    externals: {
      jquery: 'window.jQuery',
      'TweenLite': 'gsap'
    }
  }
}

Everything works just fine when my project is not minified / compiled to build-version, where I end up getting this error message:

Uncaught TypeError: Cannot set property 'gsClass' of undefined

It works perfect when developing, even though it's run through an entry, main.js... Very confusing. Anyone had this problem before?

Link to comment
Share on other sites

That is pretty weird indeed. Never heard of anything like that before. I looked at the code too and can't figure out why in the world an error like that could possibly get thrown. [scratching head] 

 

Can you provide detailed instructions about how to reproduce the issue (including what needs to be installed, where, etc.)? I don't use bower nor webpack, so I may need some hand-holding.

 

By the way, TweenMax is considered the "main" file for the "gsap" package, not TweenLite. That probably has nothing to do with these errors though. 

  • Like 1
Link to comment
Share on other sites

Have you tried...

externals: {
  jquery: 'window.jQuery',
  'TweenLite': 'TweenLite'
}
  • Like 2
Link to comment
Share on other sites

Hi, been busy building more and haven't had a chance to follow up on this.

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.

  • Like 2
Link to comment
Share on other sites

For the record, GSAP 1.18.5 has some improvements for compatibility with Webpack/NPM/Browserify/Node. It was released today. You might want to give that a try. 

Link to comment
Share on other sites

  • 8 months later...

Upgrading to Webpack 2.2 from Webpack 1 and found the same issue. Thanks for sharing the fix @Torrfura

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×