Jump to content
Search Community

Importing drawSVG fails

eelsiee test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

I just bought GSAP BusinessGreen license but I have problems importing the drawSVG plugin. I'm using Vue.js single file components and I'm importing GSAP as following (GSAP is a npm module): 

 

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

 

This works fine. I moved the plugin folder to my src folder and I'm importing the plugin like this:

 

import DrawSVGPlugin from '../vendor/gsap-plugins/DrawSVGPlugin'

 

And I get this error (see screenshot). What do you suggest? Thanks a lot!

 

Screen Shot 2018-07-30 at 10.39.41.png

  • Like 1
Link to comment
Share on other sites

Hmm, it sounds like your bundler may not be configured to understand (or transpile) ES6 modules(?) According to that error message, it's choking on "import" which is pretty standard ES6 stuff. If your setup doesn't understand ES6 modules, you could just use the plain ES5 files which are also included in your member zip download (in "uncompressed" or "minified" folders). 

 

As for documentation, @conor909, please see https://greensock.com/docs/NPMUsage. Is that what you're looking for? 

 

@eelsiee, if you're still having trouble, would you mind creating a reduced test case and giving us access to it? Like a basic github repo or stackblitz link or something like that? Then we could try doing the compile on our end and see exactly what you're seeing. 

 

And thanks @eelsiee and @conor909 for being Club GreenSock members!

 

  • Like 2
Link to comment
Share on other sites

Hi @GreenSock,

 

Thanks for the reply, and a great product.  So I'm using create-react-app to bootstrap my app, which includes transpilers for es6 syntax.  I'm also importing elsewhere in my app with no issues. 

 

Dropping the bonus files directly into the node_modules folder is not really a solution, because they'll be deleted after an `npm install` and the folder is not in source control.

 

The NPMUsage docs are great but It's not clear on how to handle the extras that members get in the .zip folder

Link to comment
Share on other sites

Hm, I'm a bit confused then - I know the modules work fine in React and I don't understand why your build would choke simply on the word "import" if it's set up properly to transpile ES6. Tough to say without having a reduced test case. We did include some instructions about how to handle the members-only plugins in that NPMUsage page under the heading "What about bonus plugins like MorphSVGPlugin?". And yeah, I totally get why you wouldn't want to drop them into node_modules - I only meant that as a last resort if you're having trouble configuring your build process. And for the record, I've heard of a problem being (in some cases) that the transpiling is set up to only handle stuff in node_modules or something, so if you're pulling the bonus stuff in a different way, perhaps it's AFTER the transpiling happens? Just a guess (probably wrong). 

Link to comment
Share on other sites

5 hours ago, GreenSock said:

Hm, I'm a bit confused then - I know the modules work fine in React and I don't understand why your build would choke simply on the word "import" if it's set up properly to transpile ES6. 

 

Users have very little control over how tools like create-react-app import stuff. Same with Vue it seems. Bundlers really don't follow a spec, so splitting up GSAP's code is a good way to create errors. 

 

I have always maintained that the GSAP download folder should be installable. Manually setting it up...

 

 

It would be nice to see those changes in the next version of GSAP.

  • Like 1
Link to comment
Share on other sites

Oh I think I see whats happening.  So @eelsiee it looks like your importing after some code written in your file.  I can see the import is on line 17 and you have something commented out above?  imports have to be at the top of the file before any code.

 

My issue is complaining because I dropped the plugins folder directly into my project, and importing the DrawSVGPlugin directly from that folder.  But the rest of gsap modules live in npm_modules.   So the drawSVGPlugin file is trying to find TweenLite from a path relative to the .zip folder, and not from npm_modules.

Link to comment
Share on other sites

Hi and thanks all for your replies! Still didn't solve the problem, I will make a test case soon to show the problem. @conor909 the import is on line 17 because I use vue.js single file components (the other imports works fine). How did you solve the problem? Are you importing all gsap from the folder where you have the plugins?

Link to comment
Share on other sites

  • 8 months later...

Rather than making a new thread I wanted to chime in here, very similar issue about 6 months after these posts ...using React. PS all of my previous posts were under @UnioninDesign but I've since convinced my boss to purchase the business green license - woo hoo!

 

For both GSdevtools and drawSVG plugin, I get the following error:

```

Uncaught SyntaxError: Unexpected token <

```

I get that error on line 1 for both files? from my research on this error this usually points to some kind of importing or bundling issue? I'm using create-react-app...which I agree with OSUBlake does not give you much visibility of the bundling process!

 

- Other posts in this thread are spot on - depending on your deployment flow, the bonus plugins cannot be dropped into the node_modules/gsap directory...these are dropped if you run 'npm run build' or in my case to sync to an AWS S3 bucket, npm run build && aws s3 sync /build <yourBucketNameURL>...you'll get 404 errors in production, the files are indeed not available.

 

- while the NPM usage in the docs are very helpful, I've also tried the approach of adding a directory called 'gsapPlugins' to my src folder, and then importing the files like so (the relative filepath is correct FYI - thanks to vsCode!). Still get the same error?

import "../../gsapPlugins/DrawSVGPlugin.js";

 

- Here's the weird part...I did get the GSAP dev tools working, but never got this error to go away? I'm wondering if I'm just not using drawSVG properly? I'll save that for a different thread when I have time to make reduced codepen, but curious if anyone has seen the Uncaught SyntaxError, and were able to get it cleared out?

 

Excited to get these new plugins added to the toolbelt - any help is appreciated!

Link to comment
Share on other sites

1 hour ago, Stephen Marshall said:

I've since convinced my boss to purchase the business green license - woo hoo!

 

Yay! Welcome aboard. Thanks for the support! I hope you enjoy the extra goodies.

 

1 hour ago, Stephen Marshall said:

For both GSdevtools and drawSVG plugin, I get the following error:

```

Uncaught SyntaxError: Unexpected token <

```

 

Virtually impossible to troubleshoot blind like this, but yeah, it kinda sounds like a bundler issue. Are you using the ES module files or the UMD ones? Maybe try whichever one you're not using just to see if it helps anything. Typically modern bundlers prefer ES modules. We provide both for maximum flexibility. 

 

2 hours ago, Stephen Marshall said:

I've also tried the approach of adding a directory called 'gsapPlugins' to my src folder, and then importing the files like so (the relative filepath is correct FYI - thanks to vsCode!). Still get the same error?

import "../../gsapPlugins/DrawSVGPlugin.js";

 

Wouldn't you need to give it a reference somehow? Like:

import DrawSVGPlugin from "../../gsapPlugins/DrawSVGPlugin.js";

 

?

Link to comment
Share on other sites

Hello and thanks for the speedy reply...a few follow-up questions as I have not resolved the error yet:

 

1. if I use the method below, React throws a warning about not actually referencing 'DrawSVGPlugin' in your code, since in your animation code you would be using something like drawSVG: "100%" etc. Is that correct? In React at least, that syntax would only work if I was importing and using a component named <DrawSVGplugin/> somewhere in the same js or jsx file?

import DrawSVGPlugin from "../../gsapPlugins/DrawSVGPlugin.js";

2. I tried adding the files from several different folders and still get the same error, but with many versions I'm not sure I got the right one?

  • The unzipped download has an src directory, and inside that you have src/esm <-- is that the es6 module version of the files? also tried src/bonus-files-for-npm-users...both of these give me the same error I've described.
  • Same error with the files in src/uncompressed

3. I also tried the minified version, and I'm getting the error(s) below and the page won't load. It seems counter-intuitive to add a minified version of TweenLite to my gsapPlugins directory when Tweenlite already exists in node_modules directory via npm install gsap? I tried adding the TweenLite.min.js file to this same directory anyway but got the same errors, with some extra goodies too:

 

Capture.thumb.JPG.0bdc0a205a1ef4e2bb2eb8cad99e7906.JPG

Anyway, since the Dev Tools were working at one point, I'll play around with DrawSVG a bit more over the weekend in case this is what we call in the business a 'pebkac' issue (problem exists between keyboard and chair - lol). Will keep everyone updated if I figure it out!

 

 

 

 

Link to comment
Share on other sites

1 hour ago, Stephen Marshall said:

React throws a warning about not actually referencing 'DrawSVGPlugin' in your code

 

That's probably because you have tree shaking enabled in your build process and it sees you importing DrawSVGPlugin but never actually referencing it anywhere in your code, so it thinks it's unnecessary/wasteful and dumps it. The solution is what we mention in https://greensock.com/docs/NPMUsage - just reference it somewhere :) Like:

 

const plugins = [DrawSVGPlugin]; //<-- just to reference it so it doesn't get dumped by your build process

 

1 hour ago, Stephen Marshall said:

inside that you have src/esm <-- is that the es6 module version of the files?

 

Yep. Those are generally the ones you'd use in a Webpack/bundler environment. The only time you'd use the minified files is directly in the browser (like if you're loading them in via a <script> tag). 

 

Hope that helps!

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...