Mangling named functions in strict mode can cause syntax errors in Safari

[markmevans]

In strict mode, Safari 6.0.3 on OS X 10.8.3 raises an exception if a named function's name is the same as one of the function's argument names (at least in some scenarios). For example:

$ cat <<EOF | ./bin/uglifyjs -  --mangle
> "use strict";
> 
> function f1() {
>   return function f2(a,b,c) {
>   }
> }
> EOF

results in the following code:

"use strict";function f1(){return function n(n,t,u){}}

Safari parses the original code without errors, but the generated code causes the following error:

SyntaxError: Cannot declare a parameter named 'n'  in strict mode

Manually converting the inner function to be anonymous or renaming to something not matching an argument's name resolves the problem.

Also, the generated code runs fine in Chrome and Firefox and Safari does not raise a syntax error for functions declared globally.

[mishoo]

Looks like a bug in Safari, isn't it?

[markmevans]

@mishoo Seems like it. I haven't found anything in the ECMA-262 5.1 that justifies Safari's behavior, but I am a JavaScript noob so I thought maybe it was a matter of interpretation of the spec. Anyway, I wasn't sure and I thought it might be an issue that others would run into. I ran into this "minimizing" an AngularJS project. The code that's tripping up Safari is in AngularJS so I can't modify it. But it looks like I can work around this by using angular.min.js.

In case you're interested, that file is generated using Google's closure compiler which apparently converts the nested function into an anonymous function since there are no references to the function's name. Something like:

"use strict";function f1(){return function(n,t,u){}}

Maybe that's a worthwhile enhancement?

[mishoo]

It does that if you pass -c (compress).

[markmevans]

Facepalm. Thanks.

[markmevans]

Enabling mangle and compression worked around the Safari bug for me.

uglify: {
  options: {
    mangle: true,
    compress : true
  }
}

On Apr 9, 2013, at 2:31 AM, Eugene Bogomolny notifications@github.com wrote:

Hello!

I use grunt task manager to build the project. I use the latest version of grunt-contrib-uglify. Project on AngularJS. I describe task in grunt:

uglify: {
options: {
compress : false
}
}

but it seems that it does not change anything. And this problem in Safari still exists. Any advise?

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

[mgcrea]

Encountering this as well, options: { mangle: true, compress : true } did not work for me, I still get a function r() that breaks safari 6.

This can break many minified scripts, shouldn't this be handled by uglify in some way (through an option maybe), even it the behavior is safari-only?

How can I minify & avoid name collision breaking safari otherwise?

[ashclarke]

@mgcrea: On a side note (sorry it's not contributing anything):

Thanks for finding this! I found an issue with my own code whereby I was encountering a strict mode exception because I had the following:

Row { // Object 
    show: function show(show) { //code }
}

The parameter name show was conflicting with the named function, but only in Safari (My version happens to be 5.1.7 on Windows).

This bug report saved me a lot of searching time!

[mgcrea]

@ashclarke Thanks! Found that this error was indeed triggered by this code:

var CountdownFactory = function CountdownFactory(options) {

[steeeveb]

I think I have the same issue using uglify-js 2.4.16 via grunt-contrib-uglify 0.7.0. In my case, the error is on something like

c.prototype.key=function k(k){var a=this._baseState;return f(null===a.key),a.key=k,this}

tested on safari 7 and 8

[steeeveb]

ok, I found the code that produce this result:

Node.prototype.key = function key(key) {
      var state = this._baseState;

        assert(state.key === null);
          state.key = key;

            return this;
};

It's part of the library added by browserify to my node modules.
Am I doing something wrong?

[steeeveb]

I tried reserving the word 'key', but the result is the same, because key is also a reserved word in ES5.
So I don't really know if the issue has to resolved with Uglifyjs.
Can I map reserved words with mangle?

[avdg]

I know it's safari bug, but lets try to get the total perspective of ecmascript's keywords

@SteeveB where did you get the claim of key being a reserved word in es5?

Looking up the ecmascript standard: (lets assume the input is always an identifier)

Identifier ::
    IdentifierName **but not** ReservedWord

ReservedWord ::
    Keyword
    FutureReservedWord
    NullLiteral
    BooleanLiteral

Keyword :: **one of**
    break        do          instanceof  typeof
    case         else        new         var
    catch        finally     return      void
    continue     for         switch      while
    debugger     function    this        with
    default      if          throw
    delete       in          try

FutureReservedWord :: **one of**
    class   enum    extends  super
    const   export  import

NullLiteral ::
    **null**

BooleanLiteral ::
    **true**
    **false**

(see http://www.ecma-international.org/ecma-262/5.1/#sec-A.1)

My current guess is that the safari implementation believes that key is a reserved keyword and by that does not agree with what the ecmascript 5 standard says.

Though I will not rule out that previous versions of ecmascript may had it as keyword, but I don't have time yet to find it out.

[ashclarke]

@steeeveb The problem is not the word "key" as such. As per my comment, #179 (comment), the problem is that your key function has a parameter named key also.

If you had something like Node.prototype.key = function key(theKey) { instead then it would work.

[steeeveb]

Yes, I confirm. Now I'm online with the minified version modified by hand in that point(a little bit ugly :) )
After looking better, I found that the function "key" is imported by Mathjs(I think inside a dependency)
So searching for a solution with Uglifyjs options is not the right thing. I'll try elsewhere!

thank you!

[ajhsu]

Hi all,

I just tried all of approaches to make my codebase to avoid from Safari's issue.

But i got fail..

I'm currently using gulp-uglify 1.4.1( which uses uglify-js 2.4.24 as dep) to compress with my browserifed codebase.

Althrough I passed compress attribute into options, it still output some named anonymous function with same parameter's name, which will cause Safari error in strict mode.

Here's what i passed into gulp-uglify

{
    mangle: true,
    compress: true
}

And i still can find some named anonymous function with same parameter's name, like:
n.prototype.key=function d(d){
r.prototype.error=function M(e,M){

And I'm thinking reasons may be:

1. These functions were referenced by name, from somewhere else, so it won't be mangled
2. These function names were as same as parameter's name BEFORE they were uglified, that will cause uglify output the same name at the end?

Is there anybody suffering the same issue?

[avdg]

Probably time for a --screw-safari option :/

[mhenry1384]

This was my solution, removing use strict.

function minifyjs(js) {
var ast = jsp.parse(js);
ast = pro.ast_mangle(ast);
ast = pro.ast_squeeze(ast);
var minJs = pro.gen_code(ast);
minJs = minJs.replace(new RegExp('"use strict";', 'g'), '');
return minJs;
}

[avdg]

Hmm... so the problem was caused because safari wanted to pass the whole es 5 spec stuff literally... The restriction of functions to be limited in global functions and thus disabling that restriction is the es 6 way of doing this... There are tests in the test262 es5 suite to test that so that's how I know about this issue. I can lookup for details if really needed (so please ask) but otherwise you have to stick with the information in this comment :-)

In short:

• es5 doesn't allow functions in functions, es 6 lifted that restriction.
• safari says ok, I'll do that es5 check thingy (what seems later to be breaking es 6 stuff)
• other browsers didn't implement the functions in function check and comply to es 6 (maybe they never implemented that check anyway)

[mgol]

A related issue (#1052) has just broken jQuery minification in current (!) Firefox, Safari as well as IE 10.

[adamreisnz]

I experienced a similar problem due to mistakenly having the following in an AngularJS project:

.factory('CustomerStore', function $instanceStore($q, $log, $instanceStore) {

Which should have simply been:

.factory('CustomerStore', function($q, $log, $instanceStore) {

Hope this helps someone with a similar issue.

[kzc]

This Safari mangling issue was fixed recently: eb63fec

Upgrade to latest uglify-js. (2.7.3 at time of this post).

[PezCoder]

I have upgraded to latest version of gulp-uglify i.e 2.0.1 but I'm still getting the same issue,
SyntaxError: Cannot declare a parameter named 'e' as it shadows the name of a strict mode function.
On minification, this is on the top of my bundled page

!function e(t, o, n) {
    function r(i, s) {
        if (!o[i]) {
            if (!t[i]) {
                var c = "function" == typeof require && require;
                if (!s && c)
                    return c(i, !0);
                if (a)
                    return a(i, !0);
                var l = new Error("Cannot find module '" + i + "'");
                throw l.code = "MODULE_NOT_FOUND", l
            }
            var u = o[i] = {
                exports: {}
            };
            t[i][0].call(u.exports, function(e) {
                var o = t[i][1][e];
                return r(o ? o : e)
            }, u, u.exports, e, t, o, n)
        }
        return o[i].exports
    }
    for (var a = "function" == typeof require && require, i = 0; i < n.length; i++)
        r(n[i]);
    return r
}

How can i fix this, or atleast bypass this ?

[avdg]

@PezCoder you might want to open a separate issue for that as there is no guarantee you are talking about the same issue?

[PezCoder]

@avdg I'm confused on what side this issue persist.. gulp-uglify repo or the uglify itself ?
Thanks for any help

[avdg]

Seems to be uglify