webpacker 3.2.1 hardcodes uglifyOptions: { ecma: 8 } which ignores Babel target options and breaks IE11 compatibility

[shepmaster]

Dumping out the Webpack config in production mode, I have this piece of configuration:

"uglifyOptions": {
  "output": {
    "ascii_only": true
  },
  "ie8": false,
  "ecma": 8,
  "warnings": false,
  "mangle": {
    "safari10": true
  },
  "compress": {
    "warnings": false,
    "comparisons": false
  }
}

This seems to be from a5e76b8 and thus introduced in 3.2.1.

This affects us because we are using the remarkable package, which contains some JS like {Afr:"𝔄",}, which Babel properly converts to {Afr:"\uD835\uDD04",}, but then Uglify shortens back to {Afr:"\u{1d504}",}. This latter syntax isn't supported by IE11, causing issues in production, specifically the error "Expected hexadecimal digit".

Related to #1211

[shepmaster]

You can see the uglify behavior on this online example. Set the input to a = "\uD835\uDD04"; and set the appropriate options:

output: {
    ascii_only       : true,
    ecma             : 5,

output: {
    ascii_only       : true,
    ecma             : 8,

[danielma]

We are experiencing the same issue, and just fixed it by changing our production.js to

const environment = require('./environment')

environment.plugins.get("UglifyJs").options.uglifyOptions.ecma = 5

module.exports = environment.toWebpackConfig()

[gauravtiwari]

Will push an option for this in environment during the weekend. In meantime, please use the solution suggested by @danielma

[tbsvttr]

Even with Webpacker 3.2.2 both in package.json as well as Gemfile it only works with the fix by @danielma for me.

@danielma You are the man!

[clarketus]

I just spent a looong time googling for a solution to this. I'm going to add what I was searching for as a comment here to hopefully save other peoples time.

The IE11 error I was getting was:
SCRIPT1003: Expected ':'
This was occurring in webpack/bootstrap.js

The suggested solution here worked for me!

[tbsvttr]

@clarketus Very good idea!

@gauravtiwari When will this be fixed?

[gauravtiwari]

I am aiming to provide an option for this in Webpacker 4.0 but for now the solution suggested above is simple enough to use if you need to support ES5. Thank you.

[bjankord]

+1 to a config option. I think there are still a decent number of teams that need ES5 to support IE11. Having a first class option to change this config will be helpful.

[triskweline]

The solution by @danielma works for us, thank you.

This took a really long time to find out 😢 We thought there was a mistake with our Babel configuration.

Since Webpacker aims to provide a preconfigured pipeline that includes both Babel and UglifyJS by default, maybe the default config could target the same browsers in all processing steps? Webpacker's default .babelrc targets IE11, but with { ecma: 8 } UglifyJS will re-break the code that Babel just dumbed down to be compatible with IE11.

[lakim]

Just bumped into this problem.
We've investigated for a very long time before finding this issue. Wish we'd seen it before.

The following code in our vendor pack was using ES2015 syntax:

var r=e[i]={i,l:!1,exports:{}}

and was throwing this error in IE11:

SCRIPT1003: Expected ':'
File: vendor-43254822d2b4661a48f6.js, Line: 1, Column: 438878

After @danielma 's fix, the code looked like proper ES5:

var r=e[i]={i:i,l:!1,exports:{}}

I agree with @triskweline
I suspect that the majority of babel users are using it to transpile to ES5. Seeing UglifyJs ruining it is clearly not what they are expecting and they will have a hard time to understand where the issue is coming from.
The default config should be { ecma: 5 } and be configurable for those who will only target browsers that support ES2015, not the other way around.