Production builds fail on Uglify step when TypeScript target is ES6

[guiprav]

I'm submitting a bug report

• Library Version:
  0.32.0

Please tell us about your environment:

• Operating System:
  Ubuntu 16.04

• Node Version:
  8.9.1

• NPM Version:
  5.5.1

• Browser:
  N/A

• Language:
  TypeScript 2.8.3

• Loader/bundler:
  RequireJS

Current behavior:

• Steps to reproduce:

$ au new example
2 (Default TypeScript)
1 (Confirm? Yes - Default)
1 (Install dependencies? Yes - Default)

$ cd example

# Open tsconfig.json.
# Change `"target": "es5",` to `"target": "es6",`.
# Save and close.

$ au build --env prod

• What is the expected behavior?

Build should succeed.

• What happened?

Build fails:

Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'buildTypeScript'
Starting 'writeBundles'...
Tracing app...
Tracing environment...
Tracing main...
Tracing resources/index...
Tracing app...
Tracing aurelia-binding...
Tracing aurelia-bootstrapper...
Tracing aurelia-dependency-injection...
Tracing aurelia-event-aggregator...
Tracing aurelia-framework...
Tracing aurelia-history...
Tracing aurelia-history-browser...
Tracing aurelia-loader-default...
Tracing aurelia-logging-console...
Tracing aurelia-pal-browser...
Tracing aurelia-route-recognizer...
Tracing aurelia-router...
Tracing aurelia-templating-binding...
Tracing aurelia-templating-resources...
Tracing aurelia-templating-router...
Tracing text...
Writing app-bundle.js...
ERROR [Bundle] Failed to write the bundle
INFO [Bundle] SyntaxError: Unexpected token: name (App)
{ uid: 9,
  name: 'writeBundles',
  branch: false,
  error: 
   { SyntaxError: Unexpected token: name (App)
    at JS_Parse_Error.get (eval at <anonymous> (/home/elima/code/example/node_modules/uglify-js/tools/node.js:21:1), <anonymous>:73:23)
    at formatError (util.js:642:16)
    at formatValue (util.js:544:18)
    at formatProperty (util.js:833:11)
    at formatObject (util.js:649:17)
    at formatValue (util.js:609:18)
    at inspect (util.js:324:10)
    at format (util.js:191:12)
    at Console.log (console.js:127:21)
    at Promise (/home/elima/code/example/node_modules/aurelia-cli/lib/ui.js:36:15)
     message: 'Unexpected token: name (App)',
     filename: '0',
     line: 4,
     col: 10,
     pos: 162 },
  duration: [ 1, 290993958 ],
  time: 1526511825164 }
{ uid: 0,
  name: '<series>',
  branch: true,
  error: 
   { SyntaxError: Unexpected token: name (App)
    at JS_Parse_Error.get (eval at <anonymous> (/home/elima/code/example/node_modules/uglify-js/tools/node.js:21:1), <anonymous>:73:23)
    at formatError (util.js:642:16)
    at formatValue (util.js:544:18)
    at formatProperty (util.js:833:11)
    at formatObject (util.js:649:17)
    at formatValue (util.js:609:18)
    at inspect (util.js:324:10)
    at format (util.js:191:12)
    at Console.log (console.js:127:21)
    at Promise (/home/elima/code/example/node_modules/aurelia-cli/lib/ui.js:36:15)
     message: 'Unexpected token: name (App)',
     filename: '0',
     line: 4,
     col: 10,
     pos: 162 },
  duration: [ 3, 140792599 ],
  time: 1526511825167 }
{ SyntaxError: Unexpected token: name (App)
    at JS_Parse_Error.get (eval at <anonymous> (/home/elima/code/example/node_modules/uglify-js/tools/node.js:21:1), <anonymous>:73:23)
    at formatError (util.js:642:16)
    at formatValue (util.js:544:18)
    at inspect (util.js:324:10)
    at format (util.js:191:12)
    at Console.log (console.js:127:21)
    at cli.run.catch (/usr/local/lib/node_modules/aurelia-cli/bin/aurelia-cli.js:29:15)
    at <anonymous>
    at process._tickDomainCallback (internal/process/next_tick.js:228:7)
  message: 'Unexpected token: name (App)',
  filename: '0',
  line: 4,
  col: 10,
  pos: 162 }

This error seems oddly similar to aurelia/skeleton-navigation#797, but the project skeleton used is completely different.

[guiprav]

Looks like UglifyJS doesn't support ES6 minification.
From https://www.npmjs.com/package/uglify-js:

uglify-js only supports JavaScript (ECMAScript 5).
To minify ECMAScript 2015 or above, transpile using tools like Babel.

I've tried disabling minification for now, but removing the minify option from aurelia.json didn't help. Looks like it defaults to "stage & prod" if not set, so I set it to "none". That did the trick.

Would be nice if we used a minifier that supports ES2015+, though!

[jamesond]

Has anyone got this working properly?

[guiprav]

@jamesond, I haven't tried it yet, but it seems the way to go is to setup Babili. I think the easiest way is probably to disable minification in aurelia.json like I mentioned and add Babili to your production Gulp pipeline. If you give it a try, let us know if it works.

[Alexander-Taran]

you could look @ this pr #864

[jamesond]

How does one use the new terser code? Do I need to manually go in and change some things or will the aurelia-cli have it built in soon?

[3cp]

It's going to be release in next cli version. You need to change nothing in code, it's all handled in cli.

If you want to try now, use "aurelia-cli": "aurelia/cli#master". You don't need to add terser to your app dependencies.