Jump to content
Search Community

GSAP is undefined if a dependency uses GSAP too.

ard.weisrock test
Moderator Tag

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 all,

 

in a Project I want to use GSAP. It's a NPM-Project and bundled with Webpack 4.6.0.

GSAP is imported via

import {  TweenLite } from "gsap";

Now TweenLite ist undefined.

 

If I import GSAP via

import TweenLite from "gsap/TweenLite"

it is also undefined.

 

If I alias GSAP in webpack.config it is also undefined.

 

The Problem is, that I use a dependency in the project that uses GSAP too. The dependency is bundled as a UMD-Library by Webpack.

 

If have the following

import { someFunction } from "theExternalLib";
import { TweenLite } from "gsap";

GSAP in the dependency works fine, but in my app TweenLite is undefined.

 

If have the following

import { TweenLite } from "gsap";
import { someFunction } from "theExternalLib";

I can use TweenLite in my app, but in the dependency GSAP is undefined.

 

In both examples GSAP on the last import is not available.

 

 

The dependency uses jQuery. If I import jQuery in my app I can use it without any problems and the dependency works too. The jQuery in my app is the one from the appropiate import.

 

 

Many thanks in advance for any help.

Link to comment
Share on other sites

Hi Jack,

 

I've build a example:

https://gitlab.com/ard.admin/gsap

https://gitlab.com/ard.admin/gsap.git

 

In the example you have two projects. First is the app und secound the dependency (testLib). TestLib is build as UMD-Library. App imports testLib.

I've pushed all node_modules in the repo.

In both index.js you see imports for es6-version and normal-version, so you can toggle it. If you change the import in testLib you have zo re-build.

Link to comment
Share on other sites

Hm, I downloaded your app, installed it, and noticed that you didn't have the "gsap" directory named properly inside node_modules (it was "gsap-es6" instead of "gsap"). I fixed that, dropped in the new ES6 files, and it seemed to work just fine. No undefined TweenLite at all. I was doing "npm run build". Did I do something wrong? 

Link to comment
Share on other sites

Of course,

I have in node_modules the normal version of GSAP in the gsap folder and the es6 version in gsap-es6, to switch between both versions.

 

Now I have updated the repo. gsap-es6 is removed and es6 version is copied to node_modules/gsap. Lib an app now use es6 version of GSAP.

Please open app folder in terminal an run: "npm run dev"

In console I get "Uncaught TypeError.

Link to comment
Share on other sites

Sorry,

I saw that my IDE doesn't pushed all files to the repo.

Now all files available. GSAP-ES6 are in node_modules (in testLib and app).

Please update the project and follow these steps:

- cd app

- npm run build

- npm run dev

- run http://localhost:8080/ in browser

 

In Chrome I get this error:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Definition.check (testLib.js:5964)
    at new Definition (testLib.js:5974)
    at window._gsDefine (testLib.js:5980)
    at gs._class (testLib.js:5987)
    at testLib.js:6001
    at Object.<anonymous> (testLib.js:5844)
    at Object.node_modulesGsapTweenLiteJs (testLib.js:7891)
    at __webpack_require__ (testLib.js:30)
    at Object.node_modulesGsapIndexJs (testLib.js:8602)
    at __webpack_require__ (testLib.js:30)

 

If you have to change the testLib, after that you have to build it new:

- cd testLib

- npm run build

Link to comment
Share on other sites

Out of curiosity, if I'm using Webpack now, is it worthwhile to use this too? (I understand I'd need to explicitly reference the plugins I use, but I think there's only CssPlugin at the moment). I currently just do "import 'gsap';".

Link to comment
Share on other sites

Well, just replacing all the import 'gsap'; with import { TweenLite } from 'gsap/all'; (and TimelineLite and TimelineMax where appropriate) worked immediately. CssPlugin was imported as expected without me needing to reference it explicitly, nor adding it to the sideEffects in the webpack config. That was a nice surprise.

 

However the final size of the bundle is very slightly higher (1 Byte), so that's a bummer, haha. Even though I'm not technically importing all of TweenMax. shrug!

Link to comment
Share on other sites

Hm, that doesn't sound right. I mean, I'm glad it worked but if you're only using TweenLite and CSSPlugin, there's no way it should be the same size (or a bit bigger) than when it used TweenMax. Either you are indeed using TweenMax elsewhere in your project or there's something wrong with the tree shaking in your configuration of Webpack. 

 

Did you try just importing like:

import TweenLite from "gsap/TweenLite";
import CSSPlugin from "gsap/CSSPlugin";

 

?

 

There's nothing wrong with doing it the way you did (import anything/everything from "gsap/all"), but I'm just wondering if it'd be easier on Webpack to import the individual pieces separately (you really shouldn't have to though). 

 

If you want to shoot me a reduced test case, I'd be happy to take a peek.

Link to comment
Share on other sites

So, turns out I'd forgotten to swap out import 'gsap'; in one of the files, which explains why the size didn't change and everything worked immediately.

 

Once I fixed that, I did have to make an explicit reference to CSSPlugin for everything to work (importing from /all or /TweenLite made no difference, except I had to manually import some eases from EasePack when I wasn't using /all).

 

I gained 18 KiB (going from 800 to 782KiB minified, including all other assets), which I think isn't really worth the added maintenance and potential for invisible mistakes. (If you don't import CSSPlugin, there's no warning at all, but the tween just don't do anything – I'm not sure that there isn't something else silently failing somewhere else.)

It makes sense that the gain is so small, I'm using TimelineMax so the only thing that isn't used is the added stuff from TweenMax. It's probably possible to fragment GSAP into more granular chunks, but that's a challenge for another day, haha.

 

edit: maybe, when transitioning to 2.0, you should consider renaming TweenLite and TweenMax to just Tween, and TimelineLite/Max to just Timeline. The functionality would be defined by what you import anyway – I don't think there's a reason to have both names, is there? It can be a bit confusing when starting out with GSAP to decide whether to use Lite or Max versions, when, really, as long as you need the Max features once, you might as well just use it everywhere.

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