Trouble importing GSDevTools

[stekmo]

Hello. I just bought the BusinessGreen license and I'm trying to import the GSDevTools into my project. Before I just played around with GreenSock through the npm package, which worked just fine. After downloading the files I tried importing it in different ways, but I can't seem to get it work properly.

I've tried copying all the bonus plugins into my gsap node_modules folder and importing them in these two ways.

import GSDevTools from 'gsap/GSDevTools';

import { GSDevTools } from 'gsap';

When I try to run GSDevTools.create() or simply console.log the GSDevTools it says it's undefined. 

I tried importing MorphSVGPlugin this way, which seems to import the MorhpSVGPlugin function perfectly. 

 

I also tried simply putting the downloaded folder into my project, and importing it directly from that path.

import GSDevTools from '../../../../greensock/src/bonus-files-for-npm-users/GSDevTools';

Which gives me a whole bunch of errors in the console.

 

I'm currently using React and Webpack, but I can't tell if any of these are the cause of this issue.

[GreenSock]

First of all, welcome to the club (and the forums)! 

 

Sorry to hear about the trouble. You should be able to import GSDevTools from that "bonus-files-for-npm-users" folder. Typically it's best to either drop those files into the node_modules/gsap folder or somewhere in your project. Those "warnings" can be ignored (that's your linting being over-protective...those variables are fine in the order they're declared). The errors related to Linear and Power3 sound like you don't have TweenMax (or TweenLite) imported anywhere. 

 

If you're still having trouble, feel free to create the most reduced test case possible and upload a zip or use https://codesandbox.io/ so we can take a peek.  

 

[Disclaimer: I'm not very familiar with webpack or react]

[stekmo]

I created a project with create-react-app to illustrate the problem I'm having. The file size exceeded 0.33mb, so I uploaded a the zipped folder here: https://www.justbeamit.com/wajrc

 

Just run npm install and then npm start and it should display the error in the console.

[GreenSock]

Hm, I clicked the link at get: 

Quote

"sorry, this download link no longer exists :("

 

?

[stekmo]

Sorry, it seems like the link expired. Try this one.

https://www.transfernow.net/download/?utm_source=7593s128ud7v

[GreenSock]

Thanks for the files - that definitely helped. 

 

Okay, so it appears as though your build system isn't properly handling require() statements, so GSDevTools isn't having its dependencies loaded properly. One way around this is to just import the necessary files right before that import statement, like:

import TweenMax from "gsap";
import Draggable from "gsap/Draggable";
import GSDevTools from "gsap/GSDevTools";

 

That also assumes that you've copied the bonus files (from the bonus-files-for-npm-users folder of your zip download) into your node_modules/gsap directory (or you could put them elsewhere and adjust your import paths). It'll also mean you get warnings about unused imports (because you're importing TweenMax and Draggable, but never referencing those in your code directly), but those can be ignored. 

 

Does that help?