adiusz Posted August 26, 2020 Share Posted August 26, 2020 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! Link to comment Share on other sites More sharing options...
Richard1604 Posted August 26, 2020 Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
adiusz Posted August 26, 2020 Author Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
adiusz Posted August 26, 2020 Author Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
adiusz Posted August 26, 2020 Author Share Posted August 26, 2020 And here is the CodeSandBox link: codesandbox.io/s/peaceful-river-noqyw Link to comment Share on other sites More sharing options...
adiusz Posted August 26, 2020 Author Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 Did you install GSAP via the .tgz as the installation docs and video say to do? Link to comment Share on other sites More sharing options...
adiusz Posted August 26, 2020 Author Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
OSUblake Posted August 26, 2020 Share Posted August 26, 2020 You need to ignore it in your gitignore. !gsap-bonus.tgz 1 Link to comment Share on other sites More sharing options...
adiusz Posted August 26, 2020 Author Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
adiusz Posted August 26, 2020 Author Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
OSUblake Posted August 26, 2020 Share Posted August 26, 2020 8 minutes ago, adiusz said: Ok, thanks. I missed exclamation point. And you spelled it wrong. !gasp-bonus.tgz Correct !gsap-bonus.tgz 2 Link to comment Share on other sites More sharing options...
adiusz Posted August 26, 2020 Author Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
adiusz Posted August 26, 2020 Author Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now