Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Rick May

Gatsby Build Errors when using gsap.registerPlugin

Recommended Posts

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 


...  The build fails.  See the other attached image.



Thank you,






Link to post
Share on other sites

Hmmm, a few questions for ya: 

  1. Are you using the latest version of GSAP? 3.1.1 right now
  2. 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. 
  3. You're not mixing versions of files, right? In other words, an old Draggable 2.x version with GSAP 3.x? 
  4. 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. 
  • Like 2
Link to post
Share on other sites

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,
  }, []);



Thanks Jack!





  • Like 3
  • Thanks 1
Link to post
Share on other sites

Great! Thanks for letting us know. I'm sure it may help someone else down the road. 

Link to post
Share on other sites

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.