Jump to content
Search Community

Having two scripts with including TweenLite from npm/gsap

gaggo test
Moderator Tag

Go to solution Solved by OSUblake,

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 there, I have two javascript-files in my included in my html page, each calling this in it's beginning:

import TweenLite from 'gsap';

Later, when I try to call the TweenLite.to function, I get this error in the second file that I include in my html:

Uncaught TypeError: Cannot read property 'to' of undefined
    at bodyScroll (app.js:692)
    at HTMLAnchorElement.<anonymous> (app.js:640)
    at HTMLDocument.dispatch (jquery.js:5201)
    at HTMLDocument.elemData.handle (jquery.js:5009)

Any ideas?

 

EDIT: It seems like TweenLite pollutes the global namespace. Shouldn't this never be the case with browserify?

Link to comment
Share on other sites

Hm, it's  pretty tough to troubleshoot blind. What version of GSAP are you using? Do you have a reduced test case we can peek at, like in a codepen? That'd be super helpful. 

 

And yes, GSAP's core classes are globals (very intentionally). I'm not familiar with browserify, its intricacies or how exactly it handles globals, but perhaps that's a question you could pose to someone in that community? Or maybe someone else here has some insight to offer. I know for sure that plenty of people use GSAP in Browserify so it's not as if it's incompatible. 

 

I'm also curious about why you'd say that TweenLite "pollutes the global namespace" **and** that TweenLite is undefined in that bodyScroll function. In other words, if it was global, why would referencing it result in an "undefined" error? 

Link to comment
Share on other sites

Hi there, I set up a test case on my server:

 

https://rassohilber.com/debug/tweenlite/

 

There are two scripts included on the page, both importing TweenLite from the same npm gsap package. The first animates the .el-1, the second should animate .el-2. If you open the console, you see what I mean (the second script errors).

 

Sorry for saying, TweenLite pollutes the global namespace. I didn't really know what I was talking about there ;)

 

EDIT: I should maybe add that I am using watchify with babelify transform.

EDIT #2: ...but the babelify transform doesn't make a difference, just tested it without it.

Link to comment
Share on other sites

I'm pretty sure this is unrelated to GSAP. I peeked at your script1 and script2 and they looked pretty much identical except for a huge string of characters at the very end. They start the same, but then one ends with a bunch of different characters and an "=" whereas the other doesn't. 

 

It sure looks like some issue with the build process or Browserify but it's tough to diagnose in this way. 

 

Notice that the error is being thrown on this: 

_gsap2.default.to(...); //_gsap2.default is undefined.

Again, that's unrelated to GSAP as far as I can tell. I wish I had an easy answer for you. 

Link to comment
Share on other sites

Yeah, that doesn't really help except that it shows that the blurbs at the end probably aren't relevant (just sourcemaps). Something weird is happening in your build process (at least that's sure what it looks like). If you remove that from the equation, I'm quite confident the GSAP code would work great. And I also know that Browserify works with GSAP - I just don't know what's going on in your particular case. 

Link to comment
Share on other sites

If you are interested, you can test it yourself. I am really puzzled about this.

browserify assets/js/script1.js -o dist/js/script1.js -t babelify 
browserify assets/js/script2.js -o dist/js/script2.js -t babelify 

...and here are the two source files:

 

https://rassohilber.com/debug/tweenlite/assets/js/script1.js

https://rassohilber.com/debug/tweenlite/assets/js/script2.js

 

When I switch out the order of the two scripts are embedded in my html page, the last included always doesn't work. `TweenLite` is only an empty object in the second included file.

Link to comment
Share on other sites

I just posted over there. I have no idea what they're saying the problem is exactly or how to fix it. Definitely seems like an issue on their end since (as far as I know) it's not reproducible in other packagers and GSAP doesn't do anything to somehow prevent a 2nd require/import statement to be handled differently. [scratching my head]

Link to comment
Share on other sites

  • Solution

I know nothing about Browserify, but I can tell where this default is coming from

_gsap2.default.to(...); //_gsap2.default is undefined.

It's because you're importing like this, which is for export default.

import TweenLite from 'gsap';

It should be like this...

import {TweenLite} from 'gsap'; 

I always tell people you only need to import GSAP once like this. This will put GSAP on the window, making it global so you don't have to import it again.

import "gsap";

Or better yet, don't import gsap at all. Use a CDN and let the browser cache it. 

.

  • Like 1
Link to comment
Share on other sites

Thanks guys, your work is greatly appreciated! I sometimes work without a decent internet connection, that's why I tend to import everything locally. But you are right, using a CDN for the production site totally makes sense.

 

Again, thank you!!

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

    "gsap": "^1.20.2",
 

I was first getting undefined for TweenXXX, but then I changed how I loaded the script.

 

But now I noticed Chrome freezes for some animations.   Just trying to track it down now, but it works fine if I don't load the second js node package. using enqueue_script on a wordpress server to load.  sorry not much details.

Link to comment
Share on other sites

  • 1 year later...

I'm experiencing the same issue. Using gsap 2.0.2 from npm on the main site which includes a script containing (amongst other things) the Club Greensock version (1.20.2). My fix was this; I created an intermediate module that passes a reference to either the existing global version or the bundled module version:

 

import TweenMax from 'gsap/TweenMax';
import TimelineMax from 'gsap/TimelineMax';

export const Tween = window.TweenMax ? window.TweenMax : TweenMax;
export const Timeline = window.TimelineMax ? window.TimelineMax : TimelineMax;

export default {
	Tween: Tween,
	Timeline: Timeline,
};

 

This module is inside the included script. Not sure what's happening here, but at least this seems to be a working work-around for me.

Link to comment
Share on other sites

Thanks for sharing your solution, @laurentvd. I'm still perplexed by what might be going on in your build system that'd cause this problem to begin with, and we haven't heard from others outside this thread about anything similar. Have you tried updating to the latest version of everything (2.1.2)? And are you using the ES Module files (instead of the UMD ones)? 

Link to comment
Share on other sites

Update; when using 2.1.2 for both it works just fine! In my case I cannot change the first version as I don't control the source, but good to know for future reference that this is (probably) fixed by using recent gsap versions. @GreenSock if you want you can still check my sandbox as this might give interesting clues on why it does work with recent versions.

  • Like 1
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.
×
×
  • Create New...