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

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()

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!

You can use this as a workaround in your environment.js until the fix goes mainstream:

if (environment.plugins.getIndex('UglifyJs') !== -1) {
  const plugin = environment.plugins.get('UglifyJs');
  plugin.options.uglifyOptions.ecma = 5;
}

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.

@renatodeleao This is fixed on the master branch will make a release later in the week.

This is quite a big issue IMHO and took hours to track down. @gauravtiwari possible to get a fix in for this soon?

I think it should work out of the box for v4. It now uses TerserPlugin, and the corresponding configuration settings are here: https://github.com/rails/webpacker/blob/1e9e2d04de100a3d5beb085ccaad061440265dc7/package/environments/production.js#L48-L52

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.

Just upgraded from webpacker v3 to v4. I had been using @danielma’s solution :

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

But that now throws an error in v4 Error: Item UglifyJs not found, so I tried @renchap’s v4 solution:

environment.config.optimization.minimizer[0].options.uglifyOptions.ecma = 5;

but that gives me an error: TypeError: Cannot set property 'ecma' of undefined

Any ideas how to fix for webpacker v4?

If you updated to Webpacker 4 (Webpack 4) and are using the default config, the workaround is to add this line to your production.js:

environment.config.optimization.minimizer[0].options.uglifyOptions.ecma = undefined // the default, or 5 if you want it explicitely

I think it should work out of the box for v4. It now uses TerserPlugin

This was the result of our investigation as well. However, the workaround should not have been needed since 3.5.5 anyway.

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

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,

4 hours later and only after a desperate "SCRIPT1003: Expected ':' search I got here! Just want to leave a big f*ing thanks to @danielma.

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.

Great, thanks for reporting back 👍

Closing this issue…

it works! i updated the Gemfile and npm package, then all good. thank you @gauravtiwari

Thank you, so glad I found this issue.

Just to make this a bit more googleable, my problem was with DraftJS and IE11 telling me

SCRIPT1023: Expected hexadecimal digit

with this statement

n.textContent="\u{1f4f7}"

+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.