Nuxt + gsap/Draggable : Cannot use import statement outside a module

[rmonell]

Hello

 

Today I encountered an issue while trying to use gsap/Draggable in a Nuxt project

 

I've imported the plugin like so :

import { gsap } from 'gsap'

import { Draggable } from 'gsap/Draggable'

 

gsap.registerPlugin(Draggable)

But here is the error I get :

 

 

Could someone explain me if there are a particulary maniupulation to use gsap plugins in Nuxt ?

 

Thank you in advance for your time !

[ZachSaucier]

Hey rmonell. As covered in the installation docs, you should transpile GSAP. Put the following in your nuxt.config:

build: {
    ...
    transpile: ['gsap'],
},

Then you should be able to import GSAP and Draggable as such:

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

if (process.client) {
  gsap.registerPlugin(Draggable);
}

 

[rmonell]

Hello @ZachSaucier

Thanks a lot it works perfectly !

I think my next step as developer will be to learn how to correctly read a doc 😄