Jump to content
GreenSock

SudoCat

ES6 Imports making very, very little sense

Go to solution Solved by SudoCat,

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

So I was excited to notice that the recently released version 1.19.0 promised to finally bring us support for ES6 Imports, as this would be greatly helpful for my current project, which is using Webpack and Babel. 

 

I am trying to only import the bare minimum, as I'm a bit of a optimisation nut job. Based off the fragmented information I can find scattered between here and github, I should be able to import the modules using either of the following syntax.

 

import { TweenLite } from 'gsap';

 

or 

 

import TweenLite from 'TweenLite'; // Alias added in Webpack config 

 

And that all seems to be working... sort of. There just seems to be some rather odd behaviour happening:

 

If I import { TweenLite } from 'gsap', I get this error upon trying TweenLite.fromTo():

 

Uncaught TypeError: Cannot read property 'fromTo' of undefined

 

If I import TweenLite from 'TweenLite', I get this error upon trying TweenLite.fromTo():

 

Uncaught TypeError: u.default.fromTo is not a function

 

If I import TweenMax from 'TweenLite', I get no errors upon trying TweenLite.fromTo().

 

If I import { TweenMax } from 'gsap', I get no errors upon trying TweenLite.fromTo().

 

If I import { TweenLite } from 'gsap', I get no errors upon trying TweenMax.fromTo().

 

If I import TweenMax from 'TweenLite', I get the following errors upon trying TweenMax.fromTo().

 

Uncaught TypeError: u.default.fromTo is not a function

 

If I import { TweenMax } from 'gsap', I get the following errors upon trying TweenMax.fromTo().

 

Uncaught TypeError: Cannot read property 'fromTo' of undefined

 

Generally, completely bloody confusing. 

 

What's more, when importing from 'gsap', the files always come out at 185kb, regardless of what's imported. When I try importing from TweenLite, the files always come out at 101kb, regardless of what's imported. This doesn't seem quite right to me either.

 

I'd really appreciate some help to figure out what is happening here, otherwise I think I'm running a severe risk of early-onset baldness from all this hair-pulling!

 

Thanks in advance

 

Link to comment
Share on other sites

Sheesh, I think I'm as confused as you are. And unfortunately I've already gone bald (well, shaved my head but still...no more hair to pull). 

 

A few questions: 

  1. Are you 100% positive you're using GSAP 1.19.0? (Might you have a different version cached or something?)
  2. You are using babel as well as the latest Webpack, right? (GSAP isn't written in native ES6 yet)
  3. Can you send me a reduced test case so that I can easily reproduce the problem locally? 

I'm sure we can get to the bottom of it. I was able to get it working just fine with Webpack and babel. None of the errors you mentioned. [scratching head]

  • Like 1
Link to comment
Share on other sites

  • Solution

Hahah, well that's comforting to know I'm not the only one lost by this!

  • Definitely looks like I'm using 1.19.0; my package.json and the package.json of the gsap folder in my node_modules folder declare it as 1.19.0
  • Definitely have both babel and webpack; The rest of my ES6 stuff seems to be working fine.


 

So while writing this message, I managed to crack the issue! I started creating a test project using a stripped down version of my existing project, and suddenly the errors all went away. Upon closer inspection, it turned out that I had been a giant idiot, and I actually still had the cdn links in my footer from when I was prototyping the animations last week. 

 

Apologies for the time wasted, hopefully this information saves someone else from an impromptu trip the the barbers!

 

Just for the record as well, I still found that if you import { moduleName } from 'gsap', you don't actually make any filesize savings compared to importing each module individually.

 

Thanks anyway!

  • Like 3
Link to comment
Share on other sites

Thanks for reporting back with your findings (and solution). Glad you figured it out :) 

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.
×