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

[Hirbod]

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!

[Hirbod]

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.

[OSUblake]

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;

 

[Hirbod]

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.

[Hirbod]

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

[OSUblake]

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?

[Hirbod]

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

[OSUblake]

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

 

[GreenSock]

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? 

[OSUblake]

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.

 

[GreenSock]

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)

[OSUblake]

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

SplitText.globalName = "SplitText";

 

[Hirbod]

Yes, I am calling install after registration

 @GreenSock

 

which one of the suggestions are the preferred ones now?

[GreenSock]

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

 

[Hirbod]

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