Errors when trying to use Draggable plugin with Next.js / React

[KerveCreative]

I am trying to use GSAP Draggable in a Next.js project (i.e. React). Unfortunately I am encountering some errors.

 

I have followed the steps on the installation page, installing gsap using

npm install gsap

 

In my component, I then began with:

import { gsap } from 'gsap';
import { Draggable } from 'gsap/Draggable';
gsap.registerPlugin(Draggable);

But this gave the error:

"SyntaxError: Cannot use import statement outside a module"

 

I read in these forums that this might be fixable by changing the Draggable import to reference the /dist folder:

import { Draggable } from 'gsap/dist/Draggable';

 

But now I get the error:

"TypeError: Cannot read properties of undefined (reading 'style')"

 

As you can see in this screenshot, this appears to be happening in the gsap.registerPlugin part.

 

 

Unfortunately I haven't been able to find a reason why this is happening, or any possible solutions.

 

Is anyone able to suggest why this may be happening, and how I might fix this? Thanks for any help!

[KerveCreative]

In typical fashion, after posting I've now resolved this issue with some more searching.

 

I had tried removing the following registerPlugin line altogether:

gsap.registerPlugin(Draggable);

 

But that gave another error:

TypeError: _toArray is not a function

 

So I knew this was needed.

 

It turns out that adding a condition to check for the window object around this line solves the issue.

 

The following now works fine:

import { gsap } from 'gsap';
import { Draggable } from 'gsap/dist/Draggable';
if (typeof window !== 'undefined') {
  gsap.registerPlugin(Draggable);
}

[Rodrigo]

Hi,

 

Is great to hear that you were able to solve your issue @KerveCreative! 🥳

 

Also, thanks for posting back and sharing your solution with the community!

 

Happy Tweening!