Problem registering the TextPlugin

[cbourne 1 Likes (Newbie)]

Hi, I'm trying to use the TextPlugin.However, I get the following error when I try to register the TextPlugin. 

 

TypeError: Cannot read properties of undefined (reading 'default')
    at +page.svelte:5:20
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
    at Object.default (root.svelte:42:40)
    at Object.default (/src/routes/+layout.svelte:72:33)
    at AppShell.svelte:53:63
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
    at eval (/src/routes/+layout.svelte:48:88)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1892:22)
    at root.svelte:41:39
    at $$render (/node_modules/svelte/internal/index.mjs:1892:22)

I've followed the docs and have installed like this. All other core GSAP features are all working perfectly.

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

gsap.registerPlugin(TextPlugin);

[RicharB 0 Likes (Newbie)]

Hi, I'm having similar issue with TextPLugin. The GSAP is working fine until I'm trying to  import TextPLugin as I'm getting this error
Uncaught TypeError: Cannot read properties of undefined (reading 'toUpperCase')
    at Plugin.init

I'm using Next 13. Anyone know what to do?

import { gsap } from 'gsap';

import { TextPlugin } from 'gsap/dist/TextPlugin';

[GreenSock 18,566 Likes (Superhero)]

@cbourne @RicharB - do you have a minimal demo please? I just forked our standard Svelte Stackblitz and it seems to work fine: 

https://stackblitz.com/edit/vitejs-vite-n3rcj8?file=src%2FApp.svelte

 

I wonder if maybe the target of your animation isn't a DOM element(?). Very difficult to troubleshoot blind, so once you provide a minimal demo that clearly illustrates the issue I'm sure it'll allow us to identify the problem and offer better advice. 

[RicharB 0 Likes (Newbie)]

Yeah, for some reason the TextPlugin doesn't work with react useRef hook. If I use id on my span element it started to work

[GreenSock 18,566 Likes (Superhero)]

Oh, I bet your passing in the Ref object instead of the actual element. In other words, you should use ref.current, not ref as the target. If you're still struggling, please be sure to provide a minimal demo. You can just hit the "fork" button in my Stackblitz and make your edits, save, and post that new forked URL here. 

[cbourne 1 Likes (Newbie)]

OK so here's a Stackblitz minimal example - however it works here, bit not in my local environment. I'm using Svelte 3.54.0. 

 

If I comment out the gsap.registerPlugin(TextPlugin);line It doesn't throw the error, so the problem seems be related to the registration functions.  

 

https://stackblitz.com/edit/vitejs-vite-qnyedf?file=src%2FApp.svelte

[GreenSock 18,566 Likes (Superhero)]

Are you saying that this EXACT same code (and everything is identical) won't work locally? It works fine on Stackblitz though? 

 

In order to troubleshoot, we really need to be able to reproduce the problem somehow. It sure sounds to me like something is different in your local files. That error message you originally posted seems to be getting hit outside of anything GSAP-related. And did you try importing from the /dist/ directory like "gsap/dist/TextPlugin"?

[cbourne 1 Likes (Newbie)]

Hi OK, so changing my import from from "gsap/TextPlugin"; to "gsap/dist/TextPlugin"; resolved the issue.

 

I notice the GSAP install helper creates this for ES Modules

 

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

gsap.registerPlugin(TextPlugin);

and this for UMD/CommonJS

 

import { gsap } from "gsap/dist/gsap";
import { TextPlugin } from "gsap/dist/TextPlugin";

gsap.registerPlugin(TextPlugin);

Assume I should have been using the UMD/CommonJS option for Svelte ? 

 

Also, prior to using the TextPlug my import for my Svelte app was just this, i.e. the ES Modules way, and everything worked OK.

 

import { gsap } from "gsap";

 

 

[GreenSock 18,566 Likes (Superhero)]

Glad you got it worked out! I'm not familiar with Svelte or its requirements but my understanding is that the UMD vs ESM stuff has mostly do to with your build system/bundler.