bitmonkey

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

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: 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 When running 'npm start' now, compile fails because eslint is too strict (no-undef): mmh...we are clever enough to know, how to ease eslint-rules. Let's add this entry to our package.json: 'npm start' runs and compiles. Great! Let's look at the browser: Wuat? As I console.logged the imported TweenMax, this is what I can see in the browser console: It's an empty object! The "not-so-obvious" solution was to change the order of the imports: 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

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.