Bug: Uglified babel polyfill with reduce_vars option causes string.split to misbehave in chrome 51

[bdwain]

Bug report or feature request?
Bug report

ES5 or ES6+ input?
Es5

Uglify version (uglifyjs -V)
2.8.26

JavaScript output or error produced.
The native string split method seems to no longer work correctly in the console (or my app) when i load my app. This only happens in chrome 51.

expected behavior (this is in the console after loading my app. uglify is not processing this code directly):

let str = 'fooBar'
str.split(/(?=[A-Z])/)

> ["foo", "Bar"]

actual behavior:

let str = 'fooBar'
str.split(/(?=[A-Z])/)

> ["fooBar"]

How to reproduce
I ran create-react-app with the canary build of react-scripts (because it needs webpack 2 to reproduce the issue) and the only change i had to make was importing babel-polyfill in the entry point to break it. Removing react and all of the css did not fix it. It does not happen in development mode builds. Only production builds. The issue goes away if the build is not minified. Here is the code to reproduce if you just want to clone it. https://github.com/bdwain/uglify-bug.

the full source is just

import 'babel-polyfill';
let foo = 123;
console.log(foo);

The issue seems to have started due to the suggestion in this comment on an uglify thread

The suggestion was to replace ast = ast.transform(compress) with ast = compress.compress(ast);

I do not believe this is due to create-react-app's usage of the webpack plugin specifically because it happens in my own app which is not based on create-react-app. I was able to reproduce it with no options passed to the plugin.

It seems to also be a bug in chrome 51 (because no matter what we do in javascript, native methods should not break), but because it only is exposed when running uglify, it seems relevant. And while I realize that the issue is only appearing when running the webpack uglify plugin, the reason I did not file the issue with them is that it seems to have started when they made a change that was suggested here (same comment as above)

UPDATE: I removed create-react-app and webpack from the example. Now, the example is just uglifying the babel-polyfill with the reduce_vars option enabled (which seems to be the source of the issue). Including that minfied result in index.html causes the issue.

[gaearon]

In particular the culprit seems to be enabling reduce_vars.

[kzc]

The example above is ES6 code using let. uglify-js@2.8.26 only works on ES5 code.

I cannot reproduce the issue using ES5 code:

$ node_modules/.bin/uglifyjs -V
uglify-js 2.8.26

$ echo 'var str = "fooBar"; console.log( str.split(/(?=[A-Z])/) );' | node
[ 'foo', 'Bar' ]

$ echo 'var str = "fooBar"; console.log( str.split(/(?=[A-Z])/) );' | node_modules/.bin/uglifyjs -c
var str="fooBar";console.log(str.split(/(?=[A-Z])/));

$ echo 'var str = "fooBar"; console.log( str.split(/(?=[A-Z])/) );' | node_modules/.bin/uglifyjs -c | node
[ 'foo', 'Bar' ]

It would be helpful if someone would post a standalone example of breaking ES5 code with no dependencies other than uglify-js.

[bdwain]

@kzc sorry i think my original comment was a little misleading. the expected and actual outputs are not being run through uglify. they are just run in the console directly.

uglify is run on the app itself (after running through babel and webpack to convert to es5). loading the app causes the global String.split prototype method to misbehave once loading is done (so in the console or if the app uses string.split)

[kzc]

I get that the ES6 is transpiled to ES5. It's just that we don't have the time to learn third party tools and foreign applications for a bug report. If you can generate the ES5 code without uglify and post it in a gist that would be helpful.

[bdwain]

oh sorry yea here's the gist.

https://gist.github.com/bdwain/aa93e842a2fd4d23f0e710eee68ddd98

(edited to use a new gist without react or anything in it)

[bdwain]

for comparison, this gist works

https://gist.github.com/bdwain/d252d19b2ea933abdcc281f6664b8c07

the only difference is that i removed the import of babel-polyfill

(edited to use a new gist without react or anything in it)

[bdwain]

@kzc i edited the examples and gists to remove react from them because it was irrelevant. the full source code is now just

import 'babel-polyfill';
let foo = 123;
console.log(foo);

[gaearon]

I guess it would be nice to trim it down to specific code in Babel polyfill (since that's just JS too).
It is possible that this repros only in specific ES environment/tooling.

[bdwain]

i updated https://github.com/bdwain/uglify-bug to remove create-react-app and webpack from the example. I was able to reproduce it just by running uglify on the babel polyfill and including that in index.html.

[kzc]

CLI repro:

$ mkdir repro
$ cd repro
$ npm install babel-polyfill@6.23.0 browserify@14.3.0 uglify-js@3.0.7

Create this test.js file:

$ cat test.js
require("babel-polyfill");
var str = "fooBar";
console.log( str.split(/(?=[A-Z])/) );

$ node_modules/.bin/browserify test.js > bundle.js

$ node bundle.js
[ 'foo', 'Bar' ]

$ node_modules/.bin/uglifyjs bundle.js -c reduce_vars=true | node
[ 'fooBar' ]

$ node_modules/.bin/uglifyjs bundle.js -c reduce_vars=false | node
[ 'foo', 'Bar' ]

Regression introduced in 16cd5d5

[kzc]

@alexlamsl Just a hunch - can you disable replacement of all RegExp literals in reduce_vars and see what happens?