Bundling fails when minimizing user code


#1

I used the typescript-skeletal configuration, with a big change that I create dist/rel/ and dist/src/ for code during debug or release.

bundles.js hence looks like:

module.exports = {
  "bundles": {
    "dist/rel/app-build": {
      "includes": [
        "[rel/*.js]",
        "rel/*.html!text",
        "rel/*.css!text"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": false,
        "rev": false
      }
    },
    "dist/rel/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-fetch-client",
        "aurelia-router",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-polyfills",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
        "bootstrap",
        "bootstrap/css/bootstrap.css!text",
        "fetch",
        "jquery"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": false,
        "rev": false
      }
    }
  }
};

Now this creates an error when I run the gulp bundle.

[03:10:49] Starting 'bundle'...
[03:10:51] 'bundle' errored after 1.37 s
[03:10:51] Error: SyntaxError: Unexpected token: name (App) (line: 14, col: 8, pos: 582)

Error
    at new JS_Parse_Error (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1547:18)
    at js_error (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:1555:11)
    at croak (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2094:9)
    at token_error (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2102:9)
    at unexpected (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2108:9)
    at semicolon (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2128:56)
    at simple_statement (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2319:73)
    at eval (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2188:19)
    at eval (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2141:24)
    at block_ (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2434:20)
    at eval (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2406:25)
    at function_ (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2412:15)
    at expr_atom (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2627:24)
    at maybe_unary (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2797:19)
    at expr_ops (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2832:24)
    at maybe_conditional (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2837:20)
    at maybe_assign (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2861:20)
    at expression (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2880:20)
    at expr_list (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2646:24)
    at subscripts (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2780:30)
    at expr_atom (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2633:20)
    at maybe_unary (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2797:19)
    at expr_ops (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2832:24)
    at maybe_conditional (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2837:20)
    at maybe_assign (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2861:20)
    at expression (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2880:20)
    at simple_statement (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2319:55)
    at eval (eval at <anonymous> (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\uglify-js\tools\node.js:28:1), <anonymous>:2188:19)
    at minify (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\lib\output.js:80:11)
    at exports.writeOutputs (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\lib\output.js:154:14)
    at D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\lib\builder.js:702:16
    at tryCatcher (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\bluebird\js\release\promise.js:693:18)
    at Async._drainQueue (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\bluebird\js\release\async.js:133:16)
    at Async._drainQueues (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\bluebird\js\release\async.js:143:10)
    at Immediate.Async.drainQueues (D:\Paul\Documents\heren5\heren5\node_modules\systemjs-builder\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:789:20)
    at tryOnImmediate (timers.js:751:5)
    at processImmediate [as _immediateCallback] (timers.js:722:5)

This error is too complex and shouldn’t be there. Especially considering the non-minified version is working perfectly fine (I can test it, it bundles etc).

Can anyone give me a pointer on how to debug this? Thanks a lot in advance!


#2

Seems like the minifier (UglifyJS) can’t parse your scripts. Make sure you first transpile the script then minify it. Also, in case you changed the target compiler option in tsconfig.json to target es2015, it won’t work with UglifyJS.


#3

oh, that must be it. I’m dependent on es2015 features -which can’t be transpiled by the typescript compiler to es5 or earlier- (ie: for…of loop for map-types), so I’ll have to target that. - I thought aurelia was especially well adapted to esnext?

How could I configure it to use another minifier then?


#4

for…of loop for map-types for es5 is enabled by setting this in your tsconfig

"downlevelIteration": true,

Supported from TypeScript 2.3


#5

If the browsers you’re targeting are ES6/2015 compliant (or even esnext if you’re targeting evergreen browsers) it’s not always a great idea to compile all the way down to ES5.

For example, if you’re making heavy usage of async/await, Chrome’s native async/await can make around a 10-20% performance difference over the ES5 equivalent output by TypeScript.

You can get around the fact the aurelia-bundler and/or systemjs/builder do not work with ES6 by:

  • Disabling the broken minification by setting "minify": false in your bundles.js
  • Add an extra step to your build and run the bundles manually through uglify-es6