Rick May Posted January 28, 2020 Share Posted January 28, 2020 This Gatsby website is working fine in development mode. However, when I go to build it, there are errors. All of them centered around draggable (if I comment out all reference to gsap draggable, the site builds and displays without error). Worth noting that this is the first time I tried to build the website since switching to the new version of Gsap. I did not get errors in the previous Gsap version and the website functioned correctly. Since this is happening during the build process (works fine in dev mode), I'm not sure how to show this problem with codepen. I'm hoping someone knows or has run into this. 1) If I do not use gsap.registerPlugin(Draggable) on the page, the site will build without errors. However, when I try to load the page in a browser, the chrome console is telling me to register the plugin (see attached image) and the site is not rendering properly in the browser. 2) If I register the plugin with gsap.registerPlugin(Draggable); ... The build fails. See the other attached image. Thank you, Rick Link to comment Share on other sites More sharing options...
GreenSock Posted January 28, 2020 Share Posted January 28, 2020 Hmmm, a few questions for ya: Are you using the latest version of GSAP? 3.1.1 right now Have you tried registering CSSPlugin too? You really shouldn't have to since it's built-in, but I'm curious. Some build systems are way over-aggressive. You're not mixing versions of files, right? In other words, an old Draggable 2.x version with GSAP 3.x? Can you provide a reduced test case please? It's just super difficult to troubleshoot blind. It always helps when we can reproduce the error on our end and poke around in the context that's creating the error. 2 Link to comment Share on other sites More sharing options...
Rick May Posted January 28, 2020 Author Share Posted January 28, 2020 I ended up getting it to work. Just in case someone else has the same problem... I simply had to register the plugin in the useEffect() before creating the draggable. I'm still not sure why it was working fine in development when registering elsewhere. I'm sure Gatsby was responsible. useEffect(() => { gsap.registerPlugin(Draggable, InertiaPlugin); draggableScreenObj[0] = new Draggable(draggable_ref.current, { type: 'y', inertia: true, })[0]; }, []); Thanks Jack! Rick 4 3 Link to comment Share on other sites More sharing options...
GreenSock Posted January 28, 2020 Share Posted January 28, 2020 Great! Thanks for letting us know. I'm sure it may help someone else down the road. 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