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