Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Friebel

Gsap 1.20.5 and higher contains es6 code causing problems with webpack/uglifyjs

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

Hello @GreenSock Jack or somebody else who could help met with this,

 

For a while now I'm using webpack together with the gsap npm package and uglifyjs.

I keep things up to date and so far everything was working fine, until today.
After updating the gsap package from 1.20.4 to 1.20.6 suddenly uglifyJs starts complaining.

I only updated gsap, so only the gsap module has changed.
I just found out gsap 1.20.4 works fine, and the problem starts with gsap 1.20.5:

 

After searching for a solution I found that gsap 1.20.5 contains es6 code, which is not there in 1.20.4.

This is what I see in TweenLite (1.20.5):

const gs = _gsScope.com.greensock;
export { TweenLite as default };
export const SimpleTimeline = gs.core.SimpleTimeline;
export const Animation = gs.core.Animation;
export const {Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin} = _gsScope;
export const EventDispatcher = gs.events.EventDispatcher;

 

UglifyJs here complains about the constant destructuring on the forelast line which it doesn't understand:

'Name expected'

But even if it did understand it and continues its process, I would had a problem, because my project should output es5 and uglifyjs comes after transpiling.

 

So this untranspiled es6 code is causing problems with uglifyJs in the webpack workflow.

Also the minified versions of gsap 1.20.5 seem to have untranspiled es6 code now.

I can't set UglifyJs to be on es6, because I want my project to output es5 code and uglifyJs is after the transpiling, like it should in webpack.

My own projectcode is written in es6 and I use webpack babel to transpile to es5, but Babel is not transpiling the node_modules folder and I really like to keep it that way and think of that as best practice.

 

I see most of the gsap code still is written in es5, so my guess would be something went wrong compiling the lib.

But the above es6 lines (maybe more?) are in all gsap folders (gsap, gsap/umd, gsap/src/minified and gsap/src/uncompressed).

 

Did something go wrong? Or am I missing something here?
 

Thanks in advance!

Link to comment
Share on other sites

Howdy, @Friebel. Sorry to hear about the hassles. Don't worry, I'm sure we can get you back up and running...

 

First let me clarify that in 1.20.4 and earlier, GSAP was only available in what's essentially a UMD format. But a lot of people were requesting ES modules because modern build tools prefer those, and they have some other benefits as well. So as of 1.20.5 (which we actually re-published as 2.0.0 within 12 hours in order to avoid breaking changes, and we rolled things back on NPM to 1.20.6 to use the older UMD style), we ALSO offer ES modules and that's what we push by default via NPM. There's a new /umd/ directory, though, that has everything in EXACTLY the same format as before. So it should be pretty simple for ANYBODY to get the flavor they want. 

 

** Notice there's a new page in the docs dedicated to this topic: https://greensock.com/docs/NPMUsage **

 

Also please note that the minified files are NOT ES6 or even ES Modules. They're the same as they always were (plain old ES5), so I'm a little confused by your comment "Also the minified versions of gsap 1.20.5 seem to have untranspiled es6 code now" - can you please explain? 

 

In summary, if you need the UMD files you could revert to 1.20.6 on NPM or you can update to 2.0.0 and just import things from the /umd/ directory, like:

import { TweenMax, Power2 } from "gsap/umd/TweenMax"; //notice the "umd" in the path

 

Does that clear things up? If you still need some help, it'd be awesome if you could post a reduced test case that we can compile on our end to see exactly what's going on with your setup. 

Link to comment
Share on other sites

Hi @GreenSock Jack, thanks for your thorough reaction. I want to respond, but haven't got the time to look into this. I'll come back to this later.

Link to comment
Share on other sites

Today we just got the same problem in vendor.js with webpack compilation. And the webpage was not laoding ie10<= was blocking .. after removing gsap totally, everything worked fine.  as @GreenSock advice we updated to 2.0.1 and imported modules as shown.

 

Its works like a charm now.

 

FYI.

  • Like 2
Link to comment
Share on other sites

Thanks so much for letting us know that things are resolved in 2.0.1, @Kaan

Link to comment
Share on other sites

@GreenSock I upgraded to gsap 2.0.1 and changed the webpack and babel-configuration to transpile gsap. I thought it was a no go to transpile modules inside the node_modules folder, but maybe I was wrong or this is changing and the more es6, the better! :)  Now everything works fine! I didn't test any previous versions anymore, but 2.0.1 is working fine when using babel transpiling.

 

For other people having this problem, this is what I changed in my webpack config file:

Instead of excluding the node_modules folder in the babel-loader, I now replace the exclude rule by an include-rule including both my source-folder as well as the gsap folder in node_modules, like this (change your sourcepath in case you're not working with src or have your webpack configfiles in a subfolder):

const srcPath = path.resolve(__dirname, 'src');

// ...
module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: [
                    srcPath,
                    path.resolve(__dirname, 'node_modules/gsap'),
                ],
                loader: 'babel-loader',
                query: { presets: ['env'] },
            },
// ...


Next to this I also needed to get rid of an exclude rule inside the .babelrc file that was blocking the node_modules folder from being transpiled, so don't forget to check that file too! Otherwise above change won't work.
 

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