New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Production builds fail on Uglify step when TypeScript target is ES6 #883

Closed
n2liquid opened this Issue May 16, 2018 · 6 comments

Comments

Projects
None yet
4 participants
@n2liquid

n2liquid commented May 16, 2018

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.

@n2liquid

This comment has been minimized.

n2liquid commented May 16, 2018

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

This comment has been minimized.

jamesond commented Jun 8, 2018

Has anyone got this working properly?

@n2liquid

This comment has been minimized.

n2liquid commented Jun 9, 2018

@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

This comment has been minimized.

Member

Alexander-Taran commented Jun 13, 2018

you could look @ this pr #864

huochunpeng added a commit to huochunpeng/cli that referenced this issue Jul 27, 2018

feat: use terser to replace uglifyjs for better es6 support
Terser is the current active fork of uglify-es. This is not only required to support babel targeting es6, but also improve compatibility of any vendor js code which uses "const".

closes aurelia#883, aurelia#490, supersedes aurelia#864
@jamesond

This comment has been minimized.

jamesond commented Aug 2, 2018

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?

@huochunpeng

This comment has been minimized.

Member

huochunpeng commented Aug 2, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment