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!