How do I use this without setting up aliases in webpack?

[fregante]

If you got here from Google

This is the correct way to use gsap 1.19.1 and up:

import TweenLite from 'gsap/TweenLite';
import Draggable from 'gsap/Draggable';

---

Initial message:

Picking up from the email conversation.

// index.js
import Draggable from 'gsap/src/uncompressed/utils/Draggable';

npm install --save gsap
webpack index.js output.js

Hash: 4cd98c5c97d95f789039
Version: webpack 2.2.0-rc.3
Time: 180ms
    Asset    Size  Chunks             Chunk Names
output.js  110 kB       0  [emitted]  main
   [0] ./~/gsap/src/uncompressed/utils/Draggable.js 106 kB {0} [built]
   [1] (webpack)/buildin/global.js 506 bytes {0} [built]
   [2] ./index.js 62 bytes {0} [built]

ERROR in ./~/gsap/src/uncompressed/utils/Draggable.js
Module not found: Error: Can't resolve 'TweenLite' in './node_modules/gsap/src/uncompressed/utils'
 @ ./~/gsap/src/uncompressed/utils/Draggable.js 2298:2-47
 @ ./index.js

ERROR in ./~/gsap/src/uncompressed/utils/Draggable.js
Module not found: Error: Can't resolve 'CSSPlugin' in './node_modules/gsap/src/uncompressed/utils'
 @ ./~/gsap/src/uncompressed/utils/Draggable.js 2298:2-47
 @ ./index.js

This is caused by webpack ability to read AMD define() calls which reference TweenLite and CSSPlugin modules in Draggable — but they are not real node modules.

I currently have two solutions for this:

• use imports-loader and disable AMD in webpack
• use alias

My question is, can this custom config be avoided?

[jackdoyle]

Should be resolved in 1.19.1. Thanks again, @bfred-it

[fregante]

Was it pushed to this repo? I still see define(["TweenLite"]

Even in the npm package this was only fixed for the files at the root but not in the original src folder

[jackdoyle]

Yes, exactly. The root directory stuff is targeted at NPM users. The files in /src/ don't have the updated paths in order to maintain backward compatibility. So if someone set up aliases or whatever, I didn't want to yank them out from under them. But again, the root stuff is where all the juicy Node/NPM-loving stuff is. :)

[fregante]

The point of aliases was to direct the bundler (webpack) to the right file; with #187 this step can be skipped by the bundler since the importing files would define the right files

[jackdoyle]

Maybe it would work in many cases indeed...but there have been so many headaches with the way various build systems, package managers, etc. handle things that I just didn't want to risk a breaking change. It might work fine in Webpack, Browserify and 4 others, but break in RequireJS (just an example). It didn't seem worthwhile to take that risk anyway since we've got the root files in place now. Right?

[fregante]

Understandable. Are you planning on dropping the src folder in the next breaking update?

[jackdoyle]

For a 2.0.0 rewrite, yes, we'll likely do some reorganization of things indeed. Folks will expect that a major version update could have breaking changes, so I have no problem making the more sweeping changes at that point. Feel free to offer suggestions for organizing things. We're not diving into that for a little while, though, as there are some exciting tools we're looking to build in the near future and then circle back to do the ES6 stuff.

[fregante]

Then I think this is the right time to have ./TweenMax.js require ./TweenLite.js rather than bundle it, to fix this issue: https://github.com/greensock/GreenSock-JS/issues/180#issuecomment-269575891

[HectorLS]

This is still not solved in 1.20.2

It's solved for the npm free package. But if you have the GSAP membership files and do you need to store it locally you gonna have again the Module error

//NPM main folder
import TweenLite        from '../js/gsap/uncompressed/TweenLite';
import CSSPlugin        from 'gsap/CSSPlugin';    // OK
import ScrollToPlugin  from 'gsap/ScrollToPlugin';   // OK

// Local Folder
import TweenLite        from '../js/gsap/uncompressed/TweenLite';
import CSSPlugin        from '../js/gsap/uncompressed/plugins/CSSPlugin';  // Error
import ScrollToPlugin   from '../js/gsap/uncompressed/plugins/ScrollToPlugin';  // Error

[jackdoyle]

I'm a bit confused - there's a folder in the members-only zip file named "bonus-files-for-npm-users" which you can put wherever you want. You can still use the regular NPM files for all the core stuff. Are you saying that doesn't work for you?

[HectorLS]

hello @jackdoyle but in that members-only folder named "bonus-files-for-npm-users" i have no plugins at all, thats why i'm using the the files inside the uncompressed or minified folder

But still don't works, just works the call to the gsap npm package plugins files

[jackdoyle]

Hm, that's odd. You're saying that you have the folder, but it's empty? What membership level? I can't seem to find your account. An email address would be helpful. I want to try downloading the zip from your account to see what comes down. Nobody else has reported anything like this (empty folder).

[HectorLS]

Hello @jackdoyle, my account with the membership is DYOU.

Right now i am using the free gsap Npm package and paste inside the folder bonus-files-for-npm-users

But if i move the TweenLite/TweenMax . or the CSSPlugin /ScrollToPlugin from the root folder path everyting crash again.

[jackdoyle]

Hm, I just logged into your account and downloaded the zip and it does indeed have all the bonus plugins in that bonus-files-for-npm-users folder. You should be able to import those directly, or you could even copy those into your npm_modules/gsap folder (loose) and import them directly from there. Other users have no problem doing this, so I'm a little confused about why you might be running into trouble.