Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Hirbod

SplitText tree-shaking issue or window issue (maybe webpack related)

Go to solution Solved by GreenSock,

Recommended Posts

Hi,

 

I have a specific reason to add gsap into window using gsap.install(window). 

 

import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { SplitText } from 'gsap/SplitText';
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
import { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin';

gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin, ScrollToPlugin, ScrambleTextPlugin, SplitText);

 

Inside of my constructor I call 

 

gsap.install(window);


This was and is working flawlessly and I can work with GSAP across of multiple modules and elements spread all over my app. Today I've added SplitText as I need some specific text animations.
But SplitText is ONLY working while I am developing. As soon as I generate a production build (webpack), SplitText get's undefined and is also not available inside of window anymore, while it is while I am developing. This only happens with SplitText, every other plugin works just fine.

I guess there is something different how SplitText registers or exports? 
 

Uncaught ReferenceError: SplitText is not defined

Thanks!

Link to comment
Share on other sites

Quick note on my part: I've disabled tree-shaking (just to verify) and it didn't change a thing. Still not defined and also not registered.

Link to comment
Share on other sites

Sounds strange. Are you sure you aren't trying to use SplitText before your imports?

 

What happens if you add SplitText to the window?

 

window.SplitText = SplitText;

 

  • Thanks 1
Link to comment
Share on other sites

I am 100% sure. As said, while developing, trying to access SplitText via Developer Console is working great. It's there.
On my production build, it's gone. I don't know if webpack lazy-require / webpackchunk is messing around here, but since every other plugin is available, I am curious what might be the issue @OSUblake

Have a look at my Screenshots please.

Bildschirmfoto 2021-05-18 um 18.43.34.png

Bildschirmfoto 2021-05-18 um 18.44.20.png

Link to comment
Share on other sites

@OSUblake

it's working
 

window.SplitText = SplitText;


 fixed the issue for me. Super strange. While it does fix it for me, it still feels like a workaround and I am pretty sure that there is something wrong with SplitText, as I haven't had a single issue with the other plugins.

Link to comment
Share on other sites

Did you try the window thing? That's the only thing thing I can think of, like how webpack sometimes renames imports, and SplitText is the only plugin that you would actually be referencing by name.

 

And what version are you using?

  • Like 1
Link to comment
Share on other sites

Yes, the window thing fixed the issue @OSUblake. I am using version 3.6.1

And you're right, webpack is mangling the function name to

 

function w(E,X){Yt||Nt(),this.elements=q(E),this.chars=[],this.words=[],this.lines=[],this._originals=[],this.vars=X||{},I&&this.split(X)}

which is most likely the reason is was undefined. Maybe worth a note inside of the docs?

Thank you VERY MUCH!. 
 

  • Like 1
Link to comment
Share on other sites

@GreenSock is this something that can be fixed? Not sure how SplitText actually registers within gsap.

 

Link to comment
Share on other sites

2 hours ago, OSUblake said:

@GreenSock is this something that can be fixed? Not sure how SplitText actually registers within gsap.

 

I guess I don't understand the question. SplitText is exported as SplitText. If Webpack is renaming things and mangling them (inappropriately), I don't really see how we could "fix" that on our end - wouldn't that be more about tweaking Webpack settings? 

 

It looks like you did gsap.registerPlugin(SplitText), right @Hirbod? And you called gsap.install(window) AFTER you registered SplitText? 

Link to comment
Share on other sites

Don't plugins have a name property? I couldn't find one for SplitText, but you could use something like that when installing on the window.

 

13 minutes ago, GreenSock said:

If Webpack is renaming things and mangling them (inappropriately),

 

I  don't think it's doing it inappropriately here. Just part of the minification process. It doesn't know that the SplitText name shouldn't be minified.

 

Link to comment
Share on other sites

  • Solution
28 minutes ago, OSUblake said:

Don't plugins have a name property?

Yeah, for classes that's implicit, like literally a part of JavaScript which we can't really override as far as I know. It's a read-only property. YourClass.name

 

Workaround: 

gsap.core.globals("SplitText", SplitText);

Do that before you gsap.install(window)

Link to comment
Share on other sites

Right, I was just suggesting to add your own since name is reserved. 

SplitText.globalName = "SplitText";

 

Link to comment
Share on other sites

Yes, I am calling install after registration

 @GreenSock

 

which one of the suggestions are the preferred ones now?

Link to comment
Share on other sites

31 minutes ago, OSUblake said:

Right, I was just suggesting to add your own since name is reserved. 


SplitText.globalName = "SplitText";

 

Every plugin for years has had "name" (as do various demos, docs, CodePens, videos, etc.), so switching it out now would be a bit awkward. :) We'd have to wire things to look for both legacy and a new globalName. Just feels kludgy. I suppose if this becomes more of an issue for people we could consider alternatives but this sure seems like an edge case that's easily worked around with...

 

9 minutes ago, Hirbod said:

which one of the suggestions are the preferred ones now?

Does this workaround fix things for you? 

gsap.core.globals("SplitText", SplitText);

 

  • Like 1
Link to comment
Share on other sites

@GreenSock yes, your suggested workaround does fix the issue. Thanks.

  • Thanks 1
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.
×