SplitText Reference Error when compiling via Webpack

[vedarfs]

Hi everybody!

 

I have licensed club membership access and am working in SFRA 6.2 (Salesforce's Storefront reference architecture).

 

Our use case requires that GreenSock plugins/utilities be available for direct use inside of content assets. The HTML, CSS, and JavaScript are effectively the "Body" field of a content asset form and are not defined in the SFRA codebase.

 

The minified `/dist` files are included in our JS compilation and loaded in page where they are available for code rendered via content assets.

 

This approach has worked very well overall with the exception of the SplitText plugin.

 

`SplitText.min.js` can be seen loaded in page but unlike all of the other plugins throws an undefined reference error upon use in browser. (Uncaught ReferenceError: SplitText is not defined)

 

 

Has anyone had any success loading SplitText into the browser via webpack for use by markup and scripts that live outside of the primary node codebase?

 

The following methods of installation all present the same issue:

`npm install ./gsap-bonus.tgz`

`npm install gsap@npm:@gsap/business`

`direct download`

[GreenSock]

Hi @vedarfs. It's really difficult to troubleshoot without a minimal demo. I can't imagine any reason why SplitText wouldn't be available there unless it's an issue with your build tool and you're trying to reference SplitText BEFORE it's loaded in. That's my best guess. 

 

If you still need help, please make sure you provide a minimal demo, like a CodePen, Stackblitz, or CodeSandbox.

 

I noticed you don't have a Club GreenSock membership - are you using someone else's to get access to the SplitText plugin?