this.split is not a function

[merijnponzo]

Hello, first of all great module!

I try to get the club feature SplitText working, but it's not

1. i added a .npmrc within the root of my nuxt project
2. i added npm:@gsap/shockingly to my package.json
3. i added:

   gsap: {
   clubPlugins: {
     splitText: true,
   }
   }

   to my nuxt.config.json and nuxt-gsap-module to my buildModules

When i use

 console.log(this.$SplitText);

i see

but when i try to use it like:

const line = this.$SplitText(this.$refs.typewriter, {
      type: "lines,words,chars",
      linesClass: "split-line",
    });

i've got

TypeError: this.split is not a function
    SplitText SplitText.js:537
    created Faq.vue:40

Any help appreciated

[ivodolenc]

Hi, thanks for your interest in this module.

Hmm, it's hard to say where the problem is without live repo, but at first I suggest you try this:

// add 'new' before 'this.$SplitText'
const line = new this.$SplitText( // ... )

More info

[merijnponzo]

Hi, results into

this.$SplitText is not constructor

Maybe you could have a look https://github.com/merijnponzo/splittextbug

(you can add your token in .npmrc)

[ivodolenc]

Try moving your code logic to the mounted() hook because all extra and club plugins are called only on the client side. If that doesnt work, then i believe there is some issue with the installation process (club plugins).

[ivodolenc]

Closing this because of inactivity.

Another suggestion, try manually importing gsap and club plugins via nuxt plugin system. If it works that way, reopen the issue here.

Also, gsap has some issues with importing club plugins using yarn according to multiple user repors on the official forum.

Please note that this module was developed in accordance with the official guides and documents for importing the gsap core and all extra and club plugins from the public repo.

[merijnponzo]

Hello, it's mounted() indeed! thanks

[mrtsiradisi]

Hi, I will use the splittext module but I am getting an error. Can you help me?

My Code

const { $gsap } = useNuxtApp();

onMounted(() => { var childSplit = new this.SplitText(".text-animation", {type: "lines"}); console.log(childSplit); });

My Error :

index.vue:144 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'SplitText')