Wish: Require/Import in NodeJS way.

[tcw165]

Hi guys,

I import it in NodeJS way and use webpack (instead of bower, cause webpack is more powerful) to compile. It will show error like following.

error given was: ReferenceError: document is not defined
  at Function.<anonymous> (/.../node_modules/gsap/src/minified/TweenMax.min.js:15:5081)
  at [object Object].check (/.../node_modules/gsap/src/minified/TweenLite.min.js:12:817)
  at new p (/.../node_modules/gsap/src/minified/TweenLite.min.js:12:1104)
  at t._gsDefine (/.../node_modules/gsap/src/minified/TweenLite.min.js:12:1154)

I've read the article thread talking about this.

The current workaround for me is tell webpack (by adding rules in its configuration file) where to find the TweenMax, TimelineMax, and so, instead of requiring gsap cause it doesn't work for this moment.

e.g. webpack.config.js

  resolve: {
    alias: {
      'TweenLite': path.resolve(MODULE_DIR, 'gsap/src/minified/TweenLite.min.js'),
      'TweenMax': path.resolve(MODULE_DIR, 'gsap/src/minified/TweenMax.min.js'),
      'TimelineLite': path.resolve(MODULE_DIR, 'gsap/src/minified/TimelineLite.min.js'),
      'TimelineMax': path.resolve(MODULE_DIR, 'gsap/src/minified/TimelineMax.min.js'),
      'EasePack': path.resolve(MODULE_DIR, 'gsap/src/minified/easing/EasePack.min.js')
    }
  }

Actually I think it would be nice to use gsap like this:

import {TweenMax, TimelineMax, Back, Quad} from 'gsap';

[jide]

ES6 and transpilers apart, there should be a clean export of all modules using commonjs. In 2016 most of us expect being able to require a npm module straightforward :)

It's unfortunate that this issue pushes people away from the lib imho.

I tried to make a simple commonjs export of all modules, but the export system is so obscure and undocumented that I failed.

Any reason why we can't do this in a "main" entry ?

module.exports = {
  // List of modules here
}

[cgarnier]

You can do that

[jide]

:) I tried, but was unable to import other modules and then reexport them. It throws on importing TimelineMax

ERROR in ./TimelineMax.js
Module not found: Error: Cannot resolve module 'TweenLite' in /Users/jide/Projects/GreenSock-JS/src/uncompressed
 @ ./TimelineMax.js 1326:2-34

which comes from

        require("./TweenLite.js"); //dependency
        module.exports = getGlobal();

And I can't figure out why.

[cgarnier]

yes it s 'normal'. gsap is not designed as modules so it wont works.

If you are using webpack, you can do that: https://github.com/greensock/GreenSock-JS/issues/114#issuecomment-234328469 aliases do the trick.

With a cdn your can exports window.TweenMax

[jide]

Yes I'm aware of that, and of the alias trick. That's the point :)

I've had issues where one project depending on gsap had gsap as a peerDep, this "design" makes this kind of things harder to set up. That's why I'd have liked to try to add proper commonjs export. But as I said, I did not succeed.

I ended up using globals in my project. But I did not want to solve my own use case, I wanted to see if and why this is not possible -- and I still fail to see why it would not be.

[fregante]

As an update to this:

GSAP 1.19.1 and up works without aliases

... and without any custom webpack config. This the correct code:

import TweenMax from 'gsap';

// or separately:
import TweenLite from 'gsap/TweenLite';
import CSSPlugin from 'gsap/CSSPlugin';
import TimelineLite from 'gsap/TimelineLite';

Or this:

import {TweenMax, TimelineMax, Back, Quad} from 'gsap';

But not every module can be imported in a single import; for example you have to use this for Draggable:

import Draggable from 'gsap/Draggable';

[glebmachine]

Does 1.19.1 is treeshakable?

Do you test it with webpack2 or rollup tree shaking?

[fregante]

No, it's not tree-shakable. import {TweenMax, TimelineMax, Back, Quad} from 'gsap'; still loads the usual TweenMax.js file and all that's inside it: https://greensock.com/tweenmax

[glebmachine]

Bad news(

[fregante]

If file size is important you can easily import just what you need:

import 'gsap/CSSPlugin';
import TweenLite from 'gsap/TweenLite';
import TimelineLite from 'gsap/TimelineLite';

Just not TweenMax

[glebmachine]

Ok, thanks)

[born2net]

I am trying to get GSAP working with Webpack (via Angular 2) and can't see to import using all latest libs:

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

Typescript error: Error:(114, 17) TS2304:Cannot find name 'TweenLite'. and rest of functions Webpack error: ```

ERROR in ./src/app/app-module.ts Module build failed: Error: C:/msweb/studioweb/src/app/app-module.ts (50,23): Cannot find module 'gsap/Draggable'.) C:/msweb/studioweb/src/app/app-module.ts (51,23): Cannot find module 'gsap/TweenLite'.) at _checkDiagnostics (C:\msweb\studioweb\node_modules\@ngtools\webpack\src\loader.js:145:15) at C:\msweb\studioweb\node_modules\@ngtools\webpack\src\loader.js:172:17 @ ./src/main.ts 5:0-45 @ multi webpack-dev-server/client?http://localhost:4208/ ./src/main.ts

any ideas?

regards

Sean

[jackdoyle]

@born2net please open a new issue for things like this (otherwise everyone else on this thread gets notified and it's probably not directly related to the original post).

It sounds like maybe you're not using the latest (1.19.1). Tough to diagnose without more info. Feel free to open a new issue and share more info about your setup and how to reproduce the issue.