How to import Premium gsap plugins using Webpack/er

[hectorleon 1 Likes (Newbie)]

Hello,

Maybe its a silly question but i was wondering the best way to get gsap into our project.

Because i have paid the license, now i have a src/ folder with all the files.

 

Before that i was using nicely the npm/yarn package for the gsap free version.

But now i have to use the local ones ?

 

This doesn't look the best too keep my gsap plugins updated. Am i suppose to check the web for new versions ?

Or there is a way to load this "paid" plugins into my project as a npm package.

 

Thanks in advance.

[GreenSock 8,117 Likes (Superhero)]

Sorry about any confusion or hassle that causes. There's really no way for us to efficiently and securely put the members-only plugins into NPM, so the best way to handle it is to simply download the zip from our site and either drop the plugins into the node_modules directory (well, inside the "gsap" folder of course) or point your build system at a folder containing those elsewhere. It should be pretty easy. In the zip, there's a "bonus-files-for-npm-users" folder so it should be obvious which files to us. We don't need to update the members-only plugins very often at all, so it's not as if you need to worry about missing lots of updates. We generally send out an email notification if there's anything major you need to know about. 

 

Thanks for joining the club! I assume you used a different account, right? (I don't see a membership associated with @hectorleon).

 

Happy tweening!

[hectorleon 1 Likes (Newbie)]

Hi again, yes i used to play with gsap free in Codepen and i finally got a license at my company   
So now i want to include it in my webpacker 
Rails + Webpacker for bundle.

The Point.
Makes more sense for me then to put the gsap folder into my build system ( never in node_modules, because i used to remove his content to run yarn install again in case some package miss a dependency )

 

If i use NPM gsap free packages

import 'gsap/TweenLite';          //OK import
import 'gsap/CSSPlugin';         //OK import
import 'gsap/ScrollToPlugin'; //OK import

But if i store gsap folder in my source folder
 

import '../js/gsap/uncompressed/TweenLite';                            //OK import
import '../js/gsap/uncompressed/plugins/CSSPlugin';           //  retun an error
import '../js/gsap/uncompressed/plugins/ScrollToPlugin';  //  retun an error

Failed to compile.
Module not found: Error can't resolve 'TweenLite'

 

All the files into the plugin folder return me an error.

Same if i try this

import TweenLite from  '../js/gsap/uncompressed/TweenLite';  //OK import
import '../js/gsap/uncompressed/plugins/CSSPlugin';           //  retun an error
import '../js/gsap/uncompressed/plugins/ScrollToPlugin';  //  retun an error

 

 

At the begining i thought was a webpacker issue, but now seems to me to be the files. The main differences is that in the first case i didn't use the files stored into the plugins folder. But in the second i don't have those files.

 

 

Any solution here would be much appreciated

 

 

 

[DYOU 0 Likes (Newbie)]

I'm @hectorleon from the membership account, any idea about this ?

[OSUblake 9,990 Likes (Superhero)]

You're going to run into issues using a regular folder like that. Particularly when trying to import the bonus plugins because the require statements are going to be looking for a package named gsap. The path's aren't relative to the folder.

 

require("gsap/TweenLite");

 

That's a recent change that was supposed to make it easier for users to get the plugins working from a regular folder, but it ended up breaking things for other people.

 

Another issue that has been popping up with regular folders is when people use Babel for modules, it's changing the exports, treating some of the files as ES modules, which they aren't, causing all sorts of problems. I've been seeing this in the output, which is the source of the problem.

https://github.com/webpack/webpack/issues/706

 

Object.defineProperty(exports, "__esModule", {
  value: true
});

 

 

So what to do? You need to install gsap somehow. I know this isn't ideal, and it requires some extra work on your part, but you need to create your own package. It doesn't have to be a private repo or npm package. A simple, local folder works just as well.