DrawSVG not working

[adiusz]

Hello guys. 

I have 2 problems.

 

First I was trying to use DrawSVGPlugin with Gatsby, I followed docs, checked examples but svg doesn't draw or even appear at all. So i decided to recreate this problem with git repo, so I can share it with you. I decided to host this repo to Netlify, but then I realized it couldn't build my site. This is the error I'm getting: 

 

1:44:01 PM: npm ERR! code ENOENT

1:44:01 PM: npm ERR! syscall stat

1:44:01 PM: npm ERR! path /opt/build/repo/gsap-bonus.tgz

1:44:01 PM: npm ERR! errno -2

1:44:01 PM: npm ERR! enoent ENOENT: no such file or directory, stat '/opt/build/repo/gsap-bonus.tgz'

1:44:01 PM: npm ERR! enoent This is related to npm not being able to find a file.

1:44:01 PM: npm ERR! enoent

1:44:01 PM: npm ERR! A complete log of this run can be found in:

1:44:01 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-08-26T11_44_01_285Z-debug.log

1:44:01 PM: Error during NPM install

1:44:01 PM: Error running command: Build script returned non-zero exit code: 1

1:44:01 PM: Failing build: Failed to build site

1:44:01 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1

1:44:01 PM: Finished processing build request in 33.57453424s

 

 

Also, here is the repo I mentioned: 

github.com/adiusz/gatsby-gsap-example/

 

All the actions are taking place in src/pages/index.js file. I would really appreciate if someone look into this and tell me why I'm failing. 

Thanks!

[Richard1604]

1:44:01 PM: npm ERR! enoent ENOENT: no such file or directory, stat '/opt/build/repo/gsap-bonus.tgz'

1:44:01 PM: npm ERR! enoent This is related to npm not being able to find a file.

[adiusz]

I can see that @Richard1604, but it's not saying much to me - there is no guide for setting up bonus plugins for React. Also it doesn't resolve my primary problem, which is svg icons not drawing.

[ZachSaucier]

Hey @adiusz and welcome to the GreenSock forums.

 

First off, you should NOT  include Club GreenSock plugins in a public repo. Including them on your private server or in a repo that stays private is fine. But please don't include them in a public repo as it makes it easy for non-members to obtain the files.

 

You should be able to load DrawSVG via the code below:

import { gsap } from "gsap"
import { DrawSVG } from "gsap/DrawSVG";

if (typeof window !== "undefined") {
  gsap.registerPlugin(DrawSVG); 
}

If you're still having trouble, please recreate the issue using something like CodeSandbox and the import the following to load DrawSVG: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js

[adiusz]

Hi @ZachSaucier, thanks for responding. 

 

Ofc I won't include it anymore, I did it cause Netlify's log said that it couldn't find gsap-bonus.tgz file. I removed it already. 

Also, I know you are a Superhero here, but shouldn't import looks like this?

import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

gsap.registerPlugin(DrawSVGPlugin);

At least this is what Docs are saying. I tried your version and I got error. 

[ZachSaucier]

5 minutes ago, adiusz said:

shouldn't import looks like this?

That's more of a Gatsby question than a GSAP one and I'm not a Gatsby guy. My understanding was that Gatsby can run the code on the server where the window doesn't exist. Since GSAP requires the window to exist to do these sorts of animations, you only do them if it exists. @OSUblake has worked with Gatsby. He'll probably be by later to help.

 

7 minutes ago, adiusz said:

I tried your version and I got error. 

What error? 

 

Like I said, a minimal demo of your issue would be greatly helpful.

[adiusz]

And here is the CodeSandBox link: codesandbox.io/s/peaceful-river-noqyw

[adiusz]

8 minutes ago, ZachSaucier said:

What error? 

Sorry, here it is: 

 

ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'gsap/DrawSVG' in '/Users/path/to/project/pos-gatsby/src/pages'

If you're trying to use a package make sure that 'gsap/DrawSVG' is installed. If you're trying to use a local file make sure that the path is correct.

[ZachSaucier]

Did you install GSAP via the .tgz as the installation docs and video say to do?

[adiusz]

3 minutes ago, ZachSaucier said:

 My understanding was that Gatsby can run the code on the server where the window doesn't exist. Since GSAP requires the window to exist to do these sorts of animations, you only do them if it exists.

 

I think you're correct, and I found solution to this problem on this very forum. Here it is:

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger, TextPlugin, DrawSVGPlugin);
}

It works for ScrollTrigger and TextPlugin. Not only on my local development.

 

[OSUblake]

You need to ignore it in your gitignore.

!gsap-bonus.tgz

 

[adiusz]

1 minute ago, ZachSaucier said:

Did you install GSAP via the .tgz as the installation docs and video say to do?

Yes i put it to main folder of my project and then run 

npm install ./gsap-bonus.tgz. Just like the docs says.

[adiusz]

3 minutes ago, OSUblake said:

You need to ignore it in your gitignore.

!gsap-bonus.tgz

 

Ok, thanks. I missed exclamation point.

 

I still got this error on Netlify:

4:19:57 PM: npm ERR! code ENOENT

4:19:57 PM: npm ERR! syscall stat

4:19:57 PM: npm ERR! path /opt/build/repo/gsap-bonus.tgz

4:19:57 PM: npm ERR! errno -2

4:19:57 PM: npm ERR! enoent ENOENT: no such file or directory, stat '/opt/build/repo/gsap-bonus.tgz'

4:19:57 PM: npm ERR! enoent This is related to npm not being able to find a file.

4:19:57 PM: npm ERR! enoent

4:19:57 PM: npm ERR! A complete log of this run can be found in:

4:19:57 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-08-26T14_19_57_717Z-debug.log

 

I still cannot make this plugin to actually draw my SVG. You can check the code on repo here:

github.com/adiusz/gatsby-gsap-example/

or on CodeSandBox:

https://codesandbox.io/s/peaceful-river-noqyw

 

[ZachSaucier]

2 minutes ago, adiusz said:

I still got this error on Netlify

Does Netlify have a way to host files not in a repo? That way you could add the .tgz there. If they don't, use a private repo as your Netlify source and add the .tgz file.

 

Your CodeSandbox server fails to build. Please try to get it working  

[OSUblake]

8 minutes ago, adiusz said:

Ok, thanks. I missed exclamation point.

 

And you spelled it wrong. 

!gasp-bonus.tgz

 

Correct

!gsap-bonus.tgz

 

[adiusz]

12 minutes ago, ZachSaucier said:

Does Netlify have a way to host files not in a repo? That way you could add the .tgz there. If they don't, use a private repo as your Netlify source and add the .tgz file.

 

Your CodeSandbox server fails to build. Please try to get it working  

I don't think they do. But I'm facing this issue in my actual project, with a private repo. 

Also guys I don't know what is going on with that CodeSandBox, to be honest I never used it  

 

@OSUblake corrected. 

[adiusz]

It turns out that the problem with the CodeSandBox was about gsap-bonus files. I managed to get it on by removing this from package.json and deleting imports of DrawSVGPlugins. So now it works, and you can see it live here: codesandbox.io/s/beautiful-feather-gh8e2