Jump to content
GreenSock

TomerBrosh

Failed to Minify

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

Hey Guys, just updated to 2.0.0, also in 1.20.6 had this same problem... 

 

> react-scripts build

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

        ./node_modules/gsap/TweenLite.js:1966

Read more here: http://bit.ly/2tRViJ9

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! endor@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
 

  • Like 1
Link to comment
Share on other sites

It's very difficult to troubleshoot blind, but it kinda sounds like your build system (well, the minifier in particular) isn't set up to accommodate ES modules and you're not using the UMD version of GSAP. 

 

Have you tried importing from the gsap/umd directory instead of just gsap? 

 

I'm very confused, though, if you're saying that 1.20.6 also has the problem because that is UMD by default in the root directory. It'd be SUPER helpful if you could create a reduced test case and maybe post it as a github repo or something. That way we could reproduce (and troubleshoot) it on our end. Possible? 

  • Like 2
Link to comment
Share on other sites

Hey @GreenSock, I updated my repo from last time you helped me, just clone again from github.com:TomerBrosh/gsap-premium-react.git :) 

Really need to fix this building issue ASAP :shock:

 

Thanks in advance! 

 

P.S: I've copied the files in the root folder and also into the /umd/ folder and tried with both...

even if im not using TweenLite it fails on TweenLite.js because EasePack is using it? I'm not sure what's happening here

 


T:\Projects\gsap-premium-react>npm run build

> gsap-premium-react@0.1.0 build T:\Projects\gsap-premium-react
> react-scripts build

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

        ./node_modules/gsap/TweenLite.js:1966 

Read more here: http://bit.ly/2tRViJ9

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gsap-premium-react@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gsap-premium-react@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Tomer\AppData\Roaming\npm-cache\_logs\2018-05-30T10_37_24_366Z-debug.log

 

 

Maybe the debug.log will help ?

2018-05-30T10_37_24_366Z-debug.log

Link to comment
Share on other sites

I am experiencing the same issue here. I am using the default create-react-app boilerplate. When running 'npm run build' (which uses webpack)  this error breaks the build.

Link to comment
Share on other sites

Hm. I downloaded your project (https://github.com/TomerBrosh/gsap-premium-react), installed it, dropped the premium plugins into the directories as you instructed, and ran build. I don't see any problems: 

 

 npm run build

> gsap-premium-react@0.1.0 build /Users/Jack/Desktop/gsap-premium-react-master 2
> react-scripts build

Creating an optimized production build...
Compiled with warnings.

./src/App.js
  Line 2:  'logo' is defined but never used  no-unused-vars

./src/UIContainer/index.js
  Line 3:  'CSSPlugin' is defined but never used  no-unused-vars
  Line 5:  'TweenLite' is defined but never used  no-unused-vars
  Line 6:  'TweenMax' is defined but never used   no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  124.43 KB  build/static/js/main.50e51dc0.js
  1.22 KB    build/static/css/main.8d860efb.css

The project was built assuming it is hosted at the server root.

You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.

 

Am I doing something wrong? Perhaps you're using an older version of NPM Nodejs or something? [scratches head]

Link to comment
Share on other sites

I'm seeing this too using Laravel Mix using GSAP 2.0.0, running node 10.3.0 and npm 6.1.0 - it's failing to minify using UglifyJS erroring at TweenLite.js:1966,0.

Link to comment
Share on other sites

Can anyone help me reproduce this? I'd really like to solve any issues in GSAP - I'm just struggling to make the error happen. Can someone provide a reduced test case github repo or stackblitz project or something that I can peek at? Sorry if I'm missing something obvious. 

Link to comment
Share on other sites

I've messed around the new package structure the last 2 hours and it nearly drove me mad. As much as I was looking forward to the 2.0.0 version as confused I am now.

 

Maybe I am missing something obvious, but for me gsap as an npm package works totally different than all other kids on the block.

 

I expect the following to work out of the box:

 

import TweenMax from 'gsap/TweenMax'

 

also when bundling the stuff with webpack etc.

 

As I learned from the forum for gsap I have to use the UMD bundle for that

 

import * as TweenMax from 'gsap/umd/TweenMax'

 

Also hardly learned: 

 

The order of imports makes a huge difference. I was importing the MorphSVGPlugin (UMD Version) first, and afterwards TweenMax (also UMD) which leads to an empty object as imported module by webpack. So I have to import the umd-TweenMax before anything else.

 

Don't get me wrong - I absolutely love GSAP, but the package structure makes things more complicated than expected. Why don't all other npm modules have this distinction (umd, esm etc.) ?

 

Next: When using the bonus MorphSVGPlugin as UMD Version, e.g. create-react-app fails to compile because of their strict eslint rules (no-undef of 'define') ... as you can see it's an endless daisy-chain of hard to unravel things.

 

It's no bug, but it seems way to complicated.

 

  • Like 1
Link to comment
Share on other sites

Very sorry to hear about all the hassles! I'm quite surprised, actually, as things seemed to work great in various build system setups right out of the box, including webpack. We gave several people advanced access to 2.0.0 and the results were fantastic. We typically heard that it worked better than ever, making things easier too. Obviously something is different in your scenario, so I'm eager to learn about the specifics. That's why I keep asking for a reduced test case that would allow me to reproduce the errors on my end, otherwise it's extremely difficult to troubleshoot. 

 

You really shouldn't have to use the UMD stuff unless your build system is pretty old and doesn't understand ES modules. I'm no expert, but from my understanding most modern build systems LOVE (even prefer) ES modules. 

 

I'm very confused by the whole "order of imports" thing too - this is the first I've heard of that. Again, I'm eager to figure out why that's happening for you. Is there any chance you could give me access to a github repo or something that'd allow me to reproduce the problem on my end? 

 

Again, I'm super eager to do whatever we can to solve things and make it easier to use. I feel terrible that 2.0.0 is causing headaches for you. 

  • Like 1
Link to comment
Share on other sites

Hey Jack, 

 

thanks a lot for your effort! Here is the the chain-of-issues ;)

 

- use create react app to create an App (gsap-test)

- cd gsap-test

- npm install gsap

- npm run eject (and confirm) // ejecting is optional and shouldn't make things different

 

edit the App.js

 

1. ES6

We are using imports as normal:

import TweenMax from 'gsap/TweenMax'
import * as Ease from 'gsap/EasePack'

 

Everything runs fine - except 

npm run build

 

which fails because of:

 

image.png.9792ef3af3c3aff2e2b3c1dff0278b45.png

 

as you are a smart developer, you are digging around the gsap Forum and learn, that you have to use the umd-version - all right, let's do that:

 

2. UMD

 

Now we are importing the UMD versions:

 

import * as TweenMax from 'gsap/umd/TweenMax'
import * as Ease from 'gsap/umd/EasePack'

 

Now everything is working. Also the build runs fine. Great. Let's add the MorphSVGPlugin, because we want to use it.

 

3. Plugin

 

image.png.ae867e9faa43f572f59d7583f026842e.png

 

When running 'npm start' now, compile fails because eslint is too strict (no-undef):

 

image.png.4210b62290f702db92ae1b84118de006.png

 

mmh...we are clever enough to know, how to ease eslint-rules. Let's add this entry to our package.json:

 

image.png.77875fd569d347f3622b69650337d7fb.png

 

'npm start' runs and compiles. Great! Let's look at the browser:

 

image.thumb.png.54f894f7ee7b7bcffc930d8f5301cd5c.png

 

Wuat?

 

As I console.logged the imported TweenMax, this is what I can see in the browser console:

 

image.thumb.png.2cd65bed1141c0ee6656afcfa8f1e55a.png

 

It's an empty object!

 

The "not-so-obvious" solution was to change the order of the imports:

 

image.png.b66b87a2dc7bdafb654d71680ef664f0.png

 

Now everything is working. Phew.

 

As you can see, although it's not classic bug, it's very hard to get along, if one issue creates another one.

 

So for me the source of all the problem was the failed build when using the es6-modules (TweenLite.js:1966), because it lead me on the bumpy UMD road, where live is hard and dangerous.

 

I hope, these details help you :)

 

 

 

  • Like 3
Link to comment
Share on other sites

This seems a bit complicated, specially since I've done the same, tried switching the imports but I just can't get this working... Hope you guys are the magical creatures I believe you are.

Link to comment
Share on other sites

I've added a minimal test repo at https://github.com/alexhillel/gsap-test-case -  running node 10.3.0 and npm 6.1.0 on my Mac:

 

npm install

 

npm run production 

 

results in:
 

 ERROR  Failed to compile with 1 errors                                                                                                     7:47:34 PM

 error

/scripts/main.js from UglifyJs
Name expected [./node_modules/gsap/TweenLite.js:1966,0][/scripts/main.js:2045,6]

           Asset    Size  Chunks                    Chunk Names
/scripts/main.js  382 kB       0  [emitted]  [big]  /scripts/main
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! gsap-test-case@ production: `NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the gsap-test-case@ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alexhillel/.npm/_logs/2018-05-30T18_47_34_790Z-debug.log

 

  • Like 1
Link to comment
Share on other sites

Just noticed I was using an older version of Laravel Mix there, which used an older version of webpack. Updating Laravel Mix to the latest version seems to have solved the problem, so the error might lie with older versions of webpack?

Link to comment
Share on other sites

Alright, folks, please update to version 2.0.1 (just published) and you should see the issues resolved :)

 

It had to do with some older build systems not liking a line of ES6 code in TweenLite (yes, a single line). And the order of import thing required a tweak to the UMD version of TweenMax. My apologies for any headaches this caused. 

 

A special thanks to @bitmonkey for the detailed explanation as to how to reproduce the issue! 

 

Please let me know if that resolves things for everyone. I'm pretty sure it will. 

  • Like 3
Link to comment
Share on other sites

Hi,

 

Sorry for jumping in, but I have a maybe directly related issues detected.

I have a project setup of:

- React 16.4.0

- Typescript 2.8.3

- gsap 2.0.1 (types 1.19.2)

- Webpack 4.10.2

 

The react stuff is written in typescript as TS / TSX files.

I tried to get it working but I had multiple resolution problems. 

GSAP is installed as NPM module.

 

Only working version based on 2.0.1 and prior is:

 

import {TimelineMax} from "gsap/TimelineMax";

import {TweenMax} from "gsap/TweenMax";

import {Back, Linear, Quad, Quint} from "gsap/umd/EasePack";

 

In case I use gsap/EasePack instead of umd it will compile fine, but as soon as I try to run my application in browser, I will get errors like:

Quote

Uncaught TypeError: Cannot read property 'easeIn' of undefined

During runtime.

Easing packages have auto complete as usual and compiler reports no errors.

 

In case I try to avoid mixing umd and none umd files by loading all classes from umd directory, I get errors during runtime like:

Quote

Uncaught TypeError: TimelineMax_1.TimelineMax is not a constructor

 

It looks for me like something went wrong during static exports of EasePack.

 

For the moment mix of none umd for usual stuff and umd for easing package will fix the issues, but the solution is not elegant.

 

By the way, Webstorm import resolution is not really working well with the current gsap structure ;)

Link to comment
Share on other sites

@gdav, please use the "Power" eases instead of Quad and Quint. They're much more intuitively-named and they behave IDENTICALLY:

  • Quad === Power1
  • Cubic === Power2
  • Quart === Power3
  • Quint === Power4
  • Strong === Power4

As for the other problems, can you please provide a reduced test case that I can run on my end to see the error(s)? It's very difficult to troubleshoot blind. Perhaps a github repo or StackBlitz project? 

 

Also, have you made sure you don't have anything cached? I wonder if you're not using all the 2.0.1 stuff(?) I definitely wouldn't recommend mixing ES modules and UMD flavors of various GSAP files. Either use all UMD or all ES modules. 

  • Like 1
Link to comment
Share on other sites

@GreenSock Thank you very much for your fast reaction! Version 2.0.1 is now working as expected :) 

  • Like 2
Link to comment
Share on other sites

@GreenSock Thank you very much for the hint with the Power replacements.

Now my imports are clean and everything is working as expected.

 

Example imports:

import {TimelineMax} from "gsap/TimelineMax";
import {TweenMax} from "gsap/TweenMax";
import {Back, Linear} from "gsap/EasePack";

With Webpack 4 no additional "const" hacks to avoid tree shaking side effects are needed.

 

Greensocks / GSAP related dependencies in package.json

"@types/gsap": "^1.19.2",
"gsap": "^2.0.1",

With this imports and packages react + typescript + gsap is running very well.

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