npm module that has gsap as depenency

[joris-rotteveel]

Hi guys,

I have the following issue with the npm version of gsap.

-My project depends on a npm module that uses gsap -Inside my own project files, I can't import gsap again, it will error on const t=new TweenMax() and say it's not a valid constructor.

I am the creating both the project and the npm module, so any feedback is appreciated.

Kind regards,

Joris

[jackdoyle]

Hm, can you show me how you're importing it exactly? Like this:?

import TweenMax from "gsap";

Or you could also get parts like:

import {TweenMax, TweenLite, Power1, TimelineLite} from "gsap";

[joris-rotteveel]

I am importing it like import {TweenMax, TweenLite, Power1, TimelineLite} from "gsap"; this. Any of the Objects will come with the same error. The library code is a Draggable with throw physics ( we have a subscription) and compiled with babel. The interactive that imports it is also written in es6.

[jackdoyle]

Neither Draggable nor ThrowPropsPlugin are included in the main export (TweenMax). So for those, you should import like:

import Draggable from "gsap/Draggable";
import ThrowPropsPlugin from "gsap/ThrowPropsPlugin";

If that's not working for you, it sounds like maybe a configuration problem on your end or perhaps you're not using a recent version of GSAP.

[joris-rotteveel]

I have made a simple example for you. The "greensock_import" is the project folder, the file "exported_lib.js" contains the exported js file from the "greensock_lib" You'll see the error when creating a new TweenMax instance in the App.js Archive.zip

[jackdoyle]

I'm not very familiar with webpack, and you've got a TON of dependencies in the demo you provided, but it seems like there's some sort of conflict caused by that "Dragger" you're importing from "./exported_lib". If you just flip-flop the order of those two import statements, the GSAP one works fine. In other words:

//BAD:
import { Dragger } from "./exported_lib";
import { TweenMax } from "gsap";

//GOOD:
import { TweenMax } from "gsap";
import { Dragger } from "./exported_lib";

I'm not sure if the conflict is related to webpack, that particular Dragger file, Babel, or one of the other many dependencies, but something is odd. I wish I had a better answer, but at least flip-flopping the import order seemed to do the trick.

[joris-rotteveel]

Hey Jack,

Thanks for the reply. I forgot to strip out the dependencies , my apologies. I'll look into it further and update once I find something.

Cheers,

Joris

On Wed, Aug 9, 2017 at 7:51 PM, jackdoyle notifications@github.com wrote:

I'm not very familiar with webpack, and you've got a TON of dependencies in the demo you provided, but it seems like there's some sort of conflict caused by that "Dragger" you're importing from "./exported_lib". If you just flip-flop the order of those two import statements, the GSAP one works fine. In other words:

//BAD:import { Dragger } from "./exported_lib";import { TweenMax } from "gsap"; //GOOD:import { TweenMax } from "gsap";import { Dragger } from "./exported_lib";

I'm not sure if the conflict is related to webpack, that particular Dragger file, Babel, or one of the other many dependencies, but something is odd. I wish I had a better answer, but at least flip-flopping the import order seemed to do the trick.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/greensock/GreenSock-JS/issues/227#issuecomment-321181129, or mute the thread https://github.com/notifications/unsubscribe-auth/AM0jTb-cq10vqH4tJ7XecUkxMeaDxmxEks5sWWT1gaJpZM4OwQQs .

--

Joris RotteveelSenior Web Developer

Phone

• <+642553393>6449746549

Address

L1 21 Allen St, Wellington, NZ

Website http://touchtech.co.nz http://touchtech.co.nz/