`object is not a function` error after uglify minification about rickshaw HOT 34 CLOSED

I have also run into this problem using Rickshaw with require and the r.js optimiser. I bypassed the problem by changing the r.js build script to use:

uglify2: {
     mangle: false
},
optimize: "uglify2"

Which is a less agressive minification. Its a shame to do this but Rickshaw is still an awesome piece of code.

from rickshaw.

This works:

uglify: {
    except: ["$super"]
}

Still a rather big PITA...

from rickshaw.

Using: "grunt-contrib-uglify": "~0.2.0"
I applied this.

uglify: {
            options: {
                mangle: {
                    except: ["$super"]
                }
            }
        }

from rickshaw.

If you look in Makefile you can see we're running uglify with a --reserved-names flag to tell it not to clobber the $super special variable name that PTClass uses to facilitate inheritance. Maybe give that a try? Here's what we end up running for a standard build:

uglifyjs --reserved-names "\$super" rickshaw.js > rickshaw.min.js

from rickshaw.

Any chance you can get rid of the $super dependency on your side? That reserved-names option only exists in the uglify CLI interface, there's no way to specify that when using uglify directly, or in my case, through other libs like requirejs/r.js.

from rickshaw.

Unless we hear that this is a recurring pain point across lots of projects, it's unlikely that we'll move away from using Prototype's class system and $super to facilitate inheritance.

It looks like you can specify variable names to leave alone outside of uglify's CLI interface. The --reserved-names option just proxies through to the except parameter of ast_mangle().

Looks like r.js is pretty configurable too, so I bet there's a way.

from rickshaw.

Glad you got this working. Thanks for following up!

from rickshaw.

Ran into this myself. I feel it is a rather big pain point, in that it was hard to lock down the reason for it and I lost a fair bit of time to it (not easy to debug minified code). Any time there is potential inconsistency between the regular and minified version I think it should try to be fixed if at all possible.

With that small complaint out of the way, I still think this library is freakin' awesome.

from rickshaw.

I have run into this problem when using Rickshaw + RequireJS as well

from rickshaw.

Just got bitten by this. Finding the solution here saved so much time, thanks @jzaefferer.

from rickshaw.

This issue means that Rickshaw will not work with a meteor.js app run in production mode. I opened an issue on meteor here: meteor/meteor#1360.

from rickshaw.

Ran into the issue on a meteor app in production :(
@estk did you find a workaround not involving changing meteor source?

from rickshaw.

I've run into this as well. I'm trying to include Rickshaw in a yeoman scaffolded app using the angular generator. When it is minified by grunt I get the same issue mentioned here. Does anyone know how to get around this?

from rickshaw.

@rcrichton include this somewhere in your configuration:

uglify: {
    except: ["$super"]
}

Since this issue is a recurring pain I'm going to reopen it.

from rickshaw.

@jzaefferer 's solution works for me in Node as well:

        var requirejs = require('requirejs');
        requirejs.optimize({
            appDir: '...',
            dir: '...',
            uglify: {
                except: ["$super"] // Don't modify the "$super" text, needed to make Rickshaw pass optimization.
            }
        },
        function(err) {
        });

from rickshaw.

Thanks @cstephe that worked for me to.

from rickshaw.

it seems this has people loosing hair for two years now :)
thanks @jzaefferer and +1 to solve this...

from rickshaw.

Still having this issue.

from rickshaw.

Could this be added to the readme at least? A note about uglify and this project?

from rickshaw.

Awesome, thanks much! Hopefully that'll save the next programmer some frustrating hours trying to read the minified file.

from rickshaw.

It definitely saved me

from rickshaw.

Can you please unsubscribe me from the mailing list?

I tried to unsubscribe my self but it is not working apparently

Thanks

Sent from my iPhone

-Shimi

On 16 בספט 2014, at 17:45, mastersingh24 [email protected] wrote:

It definitely saved me

—
Reply to this email directly or view it on GitHub.

from rickshaw.

Thanks @cstephe your solution worked for me!

from rickshaw.

I can confirm that this is a pain point using the basic Yeoman web app template as well - the usemin step minimises the library as well and I really don't know how to add an exception there. Anyone maybe knows?

from rickshaw.

@jzaefferer Your suggestion worked for me.. Many more years later! Thanks a lot. I'm glad I found this issue before spending my entire day on this problem.

FWIW, I was not using rickshaw. I was using gulp-uglify 1.0.2 with prototypejs 1.7.2, but the fundamental issue still stands.

For historical purposes, I'd like to share some more technical details on why @jzaefferer 's fix solves the problem:

Prototype has an implicit dependency on arguments in the 0th position of a function call that are are named '$super' that have been created with the Class.create method. It is silly, IMHO, to have technical dependencies on an 'argument name' in any function in any language (let alone JavaScript). JS minifiers, like Uglifyjs, cannot reasonable detect this dependency when their algorithms are run against a static file.

This is the offending bit of Prototype code (from the Class -> addMethods function):

if (ancestor && Object.isFunction(value) &&
          value.argumentNames()[0] == "$super") {

I don't know a JS minifier (in it's right mind) that would replace that "$super" String reference with the modified argument in a function caller (which also should not have to be standardized anyway..).. And really it shouldn't.

Thanks again to those who contributed to this thread!

from rickshaw.

Tried different exclude options, but none of them worked. In the end I had to disable usemin's minification for JavaScript like this:

        useminPrepare: {
            options: {
                dest: '<%= config.dist %>',
                flow: {
                    html: {
                        steps: {'js': ['concat'], 'css': ['concat', 'cssmin']},
                        post: {}
                    }
                }
            },
            html: '<%= config.app %>/index.html'
        },

I don't see this as a good solution, though - dependency management and build systems in JavaScript are complicated enough even without having to customize them specifically for individual libraries.

from rickshaw.

👍 Thanks @jzaefferer for this one, luckily it comes up in a bug search so I didn't have to spend ages looking for the problem. Pity the owners "won't fix" this issue, but I can understand it's sort of someone elses mess.

from rickshaw.

In addition to @byrichardpowell's comment, you can still mangle with uglify2 and the following config:

uglify2: {
    mangle: {
        except: ['$super']
    }
},
optimize: 'uglify2'

from rickshaw.

I'll add to the growing list of people who have been bitten by this. Adding a note to the readme is a good start, although I feel this should be somewhere more visible too (if possible?)

Useful link: https://www.symphonious.net/2013/09/13/uglifyuglify2-rickshaw-requirejs-and-minification/

from rickshaw.

Solution for gulp:

.pipe($.uglify({ mangle: {except: '$super'} ,preserveComments: $.uglifySaveLicense })).on('error', conf.errorHandler('Uglify'))

from rickshaw.

For those who use gulp with gulp-if-else is as follows:

For uglify:

var myUglify;
myUglify = function(x){
  return uglify({
    mangle: {
      except: ['$super']
    }
  }, x);
};

For uglify-es:

var myUglify;
myUglify = function(x){
  return uglify({mangle: true}, x);
};

Then replace uglify with myUglify:

        .pipe(ifElse(onlyCompile, myUglify))

from rickshaw.

Running into this issue when using Rickshaw with Angular 5. When built for production, $super is being mangled.

Angular-cli seems stiff and mostly unconfigurable. In most threads I've seen, Angular-cli team is not trying to support specifying of uglify options via cli or config.

from rickshaw.

Meet a project built with wake and it works when "minify": false, set.:)

from rickshaw.

for webpackv5 and terser I used this config:

optimization: {
    minimizer: [new TerserPlugin({
        terserOptions: {
            mangle: {
                reserved: ['$super']
            }
        }
    })],
},

from rickshaw.