[ScrambleTextPlugin - UMD] Uncaught RangeError: Maximum call stack size exceeded

[jungleD]

Hi there, first of all, I'm not providing a codepen because the issue is related to using UMD modules with a module bundler (browserify + gulp).

 

I'm trying to implement a very simple snippet to scramble a text upon a button click. This is very straightforward and I've done this before successfully. So I will list all the issues and things I've tried.

 

Issue:

When calling the TweenMax.to using the scrambleTextPlugin I got an Uncaught RangeError: Maximum call stack size exceeded which is thrown multiple times.

 

Environment:

* Greensock ^2.0.2 (gsap) installed through NPM and imported through UMD version

* ScrambleTextPlugin (0.5.2 - 2018-09-11) downloaded through GreenSockClub and imported through UMD version

* Gulp 4.0 + with Browserify ^16.2.2 as a module bundler. 

 

What I've discovered/tried:

* Importing the modules through <script> tag makes the same code work without any error

* Other properties and plugins are working using the UMD version, e.g text plugin, changing colors, sizes, etc

* I've implemented this before, and the same code works

* I've removed all layers of my application (JS frameworks, CSS, everything)

* Created a blank project to isolate the issue

 

Full code:

```HTML

<div id="test-app"></div>

<button id="btn"> test </button>

```

 

```javascript

(function() {
  "use strict";

  

require("gsap/umd/TweenMax");
require("../../etc/libs/gsap_plugins/ScrambleTextPlugin.js"); // If I change this to the <script> import the code would work

 

let el = document.querySelector("#test-app");
let btnEl = document.querySelector("#btn");

 

btnEl.addEventListener("click", function () {
  TweenMax.to(el, 1, {
  "scrambleText": {
    "text": "anytext"
   }
  });
});

 

}());

```

When I click the button this is what happens: (screenshot attached)

 

PS: Im trying to solve this for some days now and I'm kinda crazy by now, any insight is appreciated

Regards,

[Jonathan]

Hi @jungleD and welcome to the GreenSock Forum!

 

Sorry your having trouble. Thank you for all the helpful information. To help speed up trying to find out what is going on. Can you please can create a reduced codepen demo example of this, it will help us to test in live editable environment so we can better see why this is happening.

 

We would sure appreciate it:

 

 

Thanks

[jungleD]

Thanks for your response.

 

As I said within my response there is no point of creating a codepen because the error is on the UMD version through require() calls. I cannot replicate this on codepen.

 

 

Regards,

Daniel

[GreenSock]

That's pretty weird indeed, @jungleD. It sounds like maybe a bug in your bundling process (perhaps the minification?). There's no _typeof() function in any of GSAP. 

 

It's particularly vexing because you said that running the scripts directly (not in your bundle) works great. I guess that points again to some odd issue in your bundling. Are you enabling tree shaking maybe? Can you disable it? Is there any way you could switch to using the ES6 modules and see if that gets along better with your setup? 

 

[scratching head]

 

Sounds very frustrating. Sorry about the hassle. I wish I had a great answer for you, but I've never heard of this and it's extremely difficult to troubleshoot blind

[jungleD]

Hey there, thanks for the support.

 

I'm going crazy over this, and I cannot trace the root cause of this issue :(. I already had reinstalled all my dependencies and could not make it work.

 

But I do agree that the issue seems to be at my side, I will keep investigating and let you guys know if I find out something

[jungleD]

I found out!! Not sure how to fully solve it yet to use all updated packages.

 

Looking through my last project, which I've had used the scrambleTextPlugin successfully I was using the Babel core interpreter at version 6x.

 

In this new project, I've used Babel 7x, which changes the way the plugins are loaded. Nevertheless, I was using the same plugins as the old working project, but importing in a new way.

 

* WORKING CONFIG:

"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-runtime": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.2.2",
"gsap": "^2.0.2",
"gulp": "^4.0.0",
"gulp-babel": "^7.0.1",
"gulp-browserify": "^0.5.1",
"gulp-cache": "^1.0.2",
"gulp-cond": "^1.0.0",
"gulp-envify": "^1.0.0",
"gulp-eslint": "^4.0.2",
"gulp-image-resize": "^0.13.0",
"gulp-imagemin": "^4.1.0",
"gulp-jsdoc3": "^2.0.0",
"gulp-plumber": "^1.2.0",
"gulp-postcss": "^7.0.1",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulp-watch": "^5.0.1",

 

* NOT WORKING CONFIG:

"@babel/core": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"babel-eslint": "^9.0.0",
"babel-plugin-dynamic-import-node": "^2.1.0",
"babel-plugin-transform-es2015-spread": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-runtime": "^6.26.0",
"babelify": "^10.0.0",
"browserify": "^16.2.2",
"gsap": "^2.0.2",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-browserify": "^0.5.1",
"gulp-cache": "^1.0.2",
"gulp-cond": "^1.0.0",
"gulp-envify": "^1.0.0",
"gulp-eslint": "^5.0.0",
"gulp-image-resize": "^0.13.0",
"gulp-imagemin": "^4.1.0",
"gulp-jsdoc3": "^2.0.0",
"gulp-plumber": "^1.2.0",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulp-watch": "^5.0.1",

Hope it can help someone. I will keep trying to make it work with the newer version of Babel and update the post if successful

 

 

 

 

 

UPDATE:

 

Got it! Found a config which worked well, meaning that I'm using latest Babel lib and plugins along with Greensock within my Bundler strategy.

 

# Package.json

"@babel/core": "^7.1.2",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/plugin-transform-spread": "^7.0.0",
"babel-eslint": "^9.0.0",
"babel-plugin-dynamic-import-node": "^2.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babelify": "^10.0.0",
"browserify": "^16.2.2",

 

# .babelrc

{
   "presets": ["env"],
   "plugins": ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-transform-spread", "@babel/plugin-transform-runtime", "dynamic-import-node"]
}

 

# gulp file (added the es2015 preset)

browserify({
   "entries": modulePath + "/js/main.js",
   "noParse": ["vue.js"],
   "plugin": argv.w || argv.watch ? [watchify] : [],
   "cache": {},
   "packageCache": {},
   "debug": !isProd
}).transform("envify", {
   "global": true,
   "NODE_ENV": process.env.NODE_ENV,
   "transform": [["babelify", { "presets": ["es2015"] }]]
})

 

 

Thanks for the support people, very glad it is working now

[GreenSock]

3 hours ago, jungleD said:

Got it! Found a config which worked well, meaning that I'm using latest Babel lib and plugins along with Greensock within my Bundler strategy.

 

Fantastic! Thanks for reporting back. I'm sure that must have felt REALLY good to finally get that figured out after spinning your wheels for so long. 

 

Happy tweening!