Please gsap.registerPlugin(Draggable) TypeError: _toArray is not a function

[ragingrahul]

i am getting the above mentioned error in next.js, i have looked it up and saw some solutions like registering the plugin in useLayoutEffect which i have tried but its not working, currently i have registered the plugin at the top when am importing gsap. Also even after facing the error everything works fine in the localhost, the only issue is the deploying to vercel due to the error it is not getting built

here is the code-https://github.com/ragingrahul/sphere-frontend/blob/main/src/app/Components/Content/HorizontalFeaturesCarousel.tsx/Carousel.tsx

[Rodrigo]

Hi @ragingrahul and welcome to the GreenSock forums!

 

There is not a lot we can do by looking at some code in a repo without a minimal demo.

 

The only things I can think of is that since you are using Next, you should import GSAP Plugins from the dist folder in order to use the UMD modules and not the ES modules:

import gsap from "gsap";
import { Draggable } from "gsap/dist/Draggable";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(Draggable, ScrollTrigger);

Another option is to register the plugins inside the useLayoutEffect hook:

import gsap from "gsap";
import { Draggable } from "gsap/dist/Draggable";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

const MyElement = () => {
  useLayoutEffect(() => {
    gsap.registerPlugin(Draggable, ScrollTrigger);
  }, []);
};

export default MyElement;

Finally when using GSAP in React environments, always use GSAP Context:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

I strongly suggest you to have a  look at the resources in this page:

 

Hopefully this helps.

Happy Tweening!

[ragingrahul]

Here is the minimal demo, tried all the things you mentioned and still  not working

https://stackblitz.com/edit/nextjs-byp7rq?file=pages%2Findex.js

[Rodrigo]

Hi,

 

Actually it seems that you tried what I mentioned but you definitely didn't read the articles in the page I linked in my previous post.

 

You have your timeline constructor in the outer scope of your component. Any re-render of the component will reset that particular instance and you're adding animations to it in the use effect. When working with React ALWAYS use GSAP Context as I also mentioned in my previous post. Create all your GSAP instances (Tweens, Timelines, ScrollTrigger, Draggable, etc) inside a GSAP Context instance and revert it on the cleanup phase of the useEffect/useLayoutEffect hooks.

 

Unfortunately we don't have the time resources to go through all the code in your example, but there is definitely something in it that is creating this issue. Here is a super simple example that doesn't return any error and the Draggable green box works:

https://stackblitz.com/edit/nextjs-qhrskj?file=pages%2Findex.js

 

Hopefully this helps.

Happy Tweening!