Jump to content
Search Community

Problem registering the TextPlugin

cbourne test
Moderator Tag

Recommended Posts

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);
Link to comment
Share on other sites

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';
Link to comment
Share on other sites

@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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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"?

Link to comment
Share on other sites

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";

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...