Plugins: Uncaught RefferenceError: exporets is not defined

[Christopher DuCharme]

I'm working on some banners and am having an issue where I can't get Greensock plugins to work when the js file is stored in my local environment.  I get the following error when trying to load SplitText 

 

VM2336 SplitText.js:3 Uncaught ReferenceError: exports is not defined
    at VM2336 SplitText.js:3

The same JavaScript file for SplitText works fine if I host it on a server rather than load the file from a local folder with:

  <script src="js/SplitText.js" type="text/javascript"></script>

I'm looking to have the js file included with the banner deliverables and not hosted on a third party location.

 

Any thoughts as to what the difference might be that that is causing the error when loading from my js folder and how I might be able to address that.

 

We do have the Club Greensock Membership for 5 developers, and I just downloaded the latest files this morning to see if this would resolve the issue without luck.

[ZachSaucier]

Hey Christopher. It seems like you're using the modules version of the SplitText file instead of the minified one that you should be using. Try using the "SplitText.min.js" file in the /minified directory of your ZIP download instead.

[Christopher DuCharme]

Thanks @ZachSaucier,

 

The solved that error message.  

 

I was using the unminified version because it solved another error I was having.

 

The minified version was giving me:

 

Uncaught TypeError: Cannot assign to read only property 'window' of object '#<Window>'

 

I think the issue I'm having has to due with:

'use strict';

The gulp build process / bebel is forcing it on any local js files and why it works when hosted by a third party.  So now I need to figure out away around that.

[ZachSaucier]

Does that mean you solved your issue?

 

If not, can you please explain what your setup is like? What tools are you using? Where is the GSAP file being included?

[Christopher DuCharme]

I haven't solved the root issue preventing the plugin from working yet.

 

I'm loading GSAP from the DCM CDN in my banners.  

 

Then I have gulp running a built process from an src folder to build folder that compiles my scss and minifies all my javascript using babel.  

 

Manually removing the 

'use strict';

from SplitText.min.js in the build directory solves all my issues.  But everytime gulp runs / detects a change to files again it adds it back.  So, I need to figure out away to prevent gulp from doing this globally or just for this file.

 

 

 

[ZachSaucier]

6 minutes ago, Christopher DuCharme said:

I'm loading GSAP from the DCM CDN in my banners.  

 

Then I have gulp running a built process from an src folder to build folder that compiles my scss and minifies all my javascript using bebel. 

Let me get this straight: you are loading GSAP from a CDN and then you have a bundled JS file that gulp is generating loading afterwards? That all works without SplitText?

 

If so, I would think you could just load the modules version of SplitText but I may be incorrect there as I'm not sure how bundlers work with external JS files. Maybe @OSUblake has some additional insight.

 

11 minutes ago, Christopher DuCharme said:

using bebel

I assume you mean Babel, not bebel?

 

14 minutes ago, Christopher DuCharme said:

everytime gulp runs / detects a change to files again it adds it back.  So, I need to figure out away to prevent gulp from doing this globally or just for this file.

This seems doable assuming you're using Babel.

[OSUblake]

2 minutes ago, ZachSaucier said:

If so, I would think you could just load the modules version of SplitText but I may be incorrect there as I'm not sure how bundlers work with external JS files. Maybe @OSUblake has some additional insight.

 

Loading the module version should be fine, but it's hard to say what your gulp build is doing. I think letting Babel handle the imports can lead to problems. You might be better off using a build solution like webpack, rollup, parcel, etc.