Jump to content
Search Community

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

Hirbod test
Moderator Tag

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

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

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

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

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

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