gsap nuxtjs plugin

[gregor]

Hi,

 

maybe someone has the same problem with nuxtjs. I wanted to shorten the import of gsap and scrolltrigger a bit and used a plugin. It works locally, but when I generate the pages, I just get this error.

[error] [nuxt] [request error] [unhandled] [500] gsap$2.registerPlugin is not a function

 

this is the plugin

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(gsap)
    nuxtApp.provide('gsap', gsap)
    nuxtApp.provide('ScrollTrigger', ScrollTrigger)
})

now I can use this line to have access to gsap and scrolltrigger

const { $gsap, $ScrollTrigger } = useNuxtApp()

 

Does anyone have a idea what is causing the error?

 

 

[GreenSock]

It's very difficult to troubleshoot without a minimal demo (like a Stackblitz), but I'd recommend changing your imports - see if either of these works: 

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

-OR-

// UMD
import gsap from 'gsap/dist/gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

 

[gregor]

hi jack,

 

no sry that does not work either... I'm trying to create a demo at Stackblitz 

[gregor]

ok created

 

get the the same error message there

[nuxt] [request error] [unhandled] [500] __vite_ssr_import_1__.default.registerPlugin is not a function      

https://stackblitz.com/edit/nuxt-starter-xn3azs?file=plugins%2Fgsap.js

 

 

[Rodrigo]

Hi,

 

Apparently this is related to SSR actually. This seems to work the way you intend:

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

if (typeof window !== 'undefined') {
  gsap.registerPlugin(ScrollTrigger);
}

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(gsap);
  nuxtApp.provide('gsap', gsap);
  nuxtApp.provide('ScrollTrigger', ScrollTrigger);
});

Hopefully this helps.

Happy Tweening!

[gregor]

thanks for the help. this solved my problem
Another option is to use  .client in the file name to load the plugin on the client side only.