Nuxt 3 Setup -- Cannot read properties of undefined (reading 'to')

[blerdgrammer]

Hello, I'm currently trying to build a company website using Nuxt3.

 

I wanted to use Gsap for animation (specifically text), but I'm getting the following error.

 

Cannot read properties of undefined (reading 'to')

 

I'm unsure what I need to look for to resolve this error, though I believe I've followed the docs as closely as possible.

 

To help troubleshoot I've created a code sandbox to replicate the error. 

 

Any help or a nudge in the right direction would help a lot! 

 

Thanks

Joel

 

[GreenSock]

I'm not familiar with Nuxt, but why are you doing this?:

const { $gsap } = useNuxtApp()

That's what's throwing the error - it's not returning $gsap. Why aren't you just doing a normal gsap import?  Like: 

import gsap from "gsap";

 

[Rodrigo]

Hi,

 

Jack is right, the issue is that in a Nuxt app you can access the runtime context with the useNuxtApp hook, but for using something from the app's context it has to be there first. In your demo I don't see any composable neither in the composables folder or in our package.json indicating that you installed a composable that abstracts GSAP's  import statement:

 

https://nuxt.com/docs/guide/going-further/nuxt-app

https://nuxt.com/docs/guide/directory-structure/composables

 

I think Jack's final suggestion is the best, just import GSAP in the files you need it and that should work.

 

Happy Tweening!