Uglifyjs: [ES6] Safari: SyntaxError: Cannot declare a let variable twice r

[MichaelRando]

Re: #1612
My bundle.js has any number of let e = substitutions for my code let myVariableName =. This creates a shadow on the outer scope e. I don't know if it's a Safari bug where the scope of the two variables is let-correct or not (http://stackoverflow.com/questions/42450473/safari-syntaxerror-cannot-declare-a-let-variable-twice) but it would be easier to debug and safer in Safari if the variables were not so often 'let e'

input javascript:

class LotteryPicker extends React.Component {

  static compareNumbers(a, b) {
    return a - b;
  }

  constructor(props) {
    super(props);
    let pickedSets = [];
    for (let i = 0; i < 6; i++) {
      pickedSets.push({
        mainDrawNumbers: [],
        extraDrawNumbers: []
      }); // two groups per grid
    }
    this.state = {
      pickedSets: pickedSets,
      activeGrid: 0
    };
  }

  render() {
    return index.createElement('div', null);
  }
}

uglify syntax:

uglify({
      compress: {
        screw_ie8: true,
        warnings: false
      },
      output: {
        comments: false
      },
      sourceMap: true
    })

output javascript:

class ie extends oe.Component {
        static compareNumbers(e, t)
        {
            return e - t
        }
        constructor(e)
        {
            super(e);
            let t = [];
            for (let e = 0; e < 6; e++)
                t.push({
                    mainDrawNumbers: [],
                    extraDrawNumbers: []
                });
            this.state = {
                pickedSets: t,
                activeGrid: 0
            }
        }
        render()
        {
            return oe.createElement("div", null)
        }
    }

[objectkit]

I was running into a similar issue and assumed it to be due to variable name collision produced by Uglify #harmony... I was pretty shocked that the code ran in Firefox and Chromium without this error. The development context was JavaScriptCore, which is assumably what Safari uses.

[khoanguyen2610]

I'm using angular 4.0 and javascript ES6 to develop project. I got error on safari. When i change ES6 to ES5, everything is ok, do not have any errors.
Waiting Uglify upgrade new version.

[kzc]

Safari not supporting block scoping for let is a pretty basic ES2015 bug that should be reported to the WebKit project.

When someone creates a WebKit bug report for it, please post the link here.

[MichaelRando]

I'm not convinced it's a webkit bug. I mean, even if it were, it's on every mac desktop and ios device, so dealing with it is the priority.

But I think the problem is indicated in the original stackoverflow comment, that the function argument is treated as a let variable. As a function argument, its block scope is the entire function. Reusing that variable as a loop scope shadow/alias is bad code and overlapped block scope. No?

[kzc]

I'm not convinced it's a webkit bug.

Your stackoverflow link indicated it was a Safari 10 bug. One of the responders is a maintainer of Babel.

even if it were, it's on every mac desktop and ios device, so dealing with it is the priority.

If you want your javscript to reach the widest possible audience it should be in ES5 form using the release version of uglify.

The uglify harmony branch is experimental. Harmony compress and mangle is not reliable and these features should be disabled.

This project is a volunteer effort. Pull requests to workaround this Safari bug are welcome.

[kzc]

https://bugs.webkit.org/show_bug.cgi?id=171041

[kzc]

Reportedly fixed in Safari Technology Preview Release 31:

https://webkit.org/blog/7622/release-notes-for-safari-technology-preview-31/

[kzc]

I noticed that a few projects and at least one blog don't know how to work around this Safari 10 ES6 loop bug with uglify-es.

For the record, you just have to enable the mangle option safari10 as follows from the command line with:

--mangle safari10=true

or from minify() with the option:

{
    mangle: {
        safari10: true,
    }
}

It has to be explicitly set because it is not enabled by default.

For an example see: https://github.com/mishoo/UglifyJS2/pull/1851#issuecomment-324095617

[nylen]

Hi everyone, can I ask why this option was not enabled by default? ie8 is one thing, but safari10 is still a "modern" browser, and this is a pretty terrible bug to run into and debug, since for most of us it is only going to appear in production and only with certain builds.

^ Judging from the number of linked commits above, there are probably many more people who are intermittently having this issue and haven't fixed it yet.