Bundling fails when minimizing user code

pulli23 · November 10, 2017, 2:32am

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!

gheoan · November 10, 2017, 2:59pm

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.

pulli23 · November 10, 2017, 7:31pm

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?

timfish · November 11, 2017, 9:38pm

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

"downlevelIteration": true,

Supported from TypeScript 2.3

timfish · November 11, 2017, 9:48pm

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

Topic		Replies	Views
Better minification Help Requests	3	577	February 11, 2021
Excluding PackageAnalyzer and bundling of external lib Help Requests	0	287	September 6, 2022
[Solved] Bundler: Failed to do transforms Help Requests	2	1049	September 3, 2020
Aurelia CLI bundling doesn't allow for debugging Node Module packages written in TypeScript Help Requests	0	669	February 16, 2018
CLI + Minify config override Help Requests	3	625	April 6, 2019

Bundling fails when minimizing user code

Related topics