# Bundling fails when minimizing user code

**URL:** <https://discourse.aurelia.io/t/bundling-fails-when-minimizing-user-code/351>\
**Category:** Help Requests\
**Created:** [November 10, 2017, 2:32am UTC](https://discourse.aurelia.io/t/bundling-fails-when-minimizing-user-code/351 "2017-11-10T02:32:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pulli23](https://avatars.discourse-cdn.com/v4/letter/p/b4bc9f/32.png) [@pulli23](https://discourse.aurelia.io/u/pulli23)\
**Post date:** [November 10, 2017, 2:32am UTC](https://discourse.aurelia.io/t/bundling-fails-when-minimizing-user-code/351/1 "2017-11-10T02:32:20Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![gheoan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/gheoan/32/55_2.png) [@gheoan](https://discourse.aurelia.io/u/gheoan)\
**Post date:** [November 10, 2017, 2:59pm UTC](https://discourse.aurelia.io/t/bundling-fails-when-minimizing-user-code/351/2 "2017-11-10T14:59:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pulli23](https://avatars.discourse-cdn.com/v4/letter/p/b4bc9f/32.png) [@pulli23](https://discourse.aurelia.io/u/pulli23)\
**Post date:** [November 10, 2017, 7:31pm UTC](https://discourse.aurelia.io/t/bundling-fails-when-minimizing-user-code/351/3 "2017-11-10T19:31:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [November 11, 2017, 9:38pm UTC](https://discourse.aurelia.io/t/bundling-fails-when-minimizing-user-code/351/4 "2017-11-11T21:38:46Z")

</div>

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

```auto
"downlevelIteration": true,

```

[Supported from TypeScript 2.3](https://blog.mariusschulz.com/2017/06/30/typescript-2-3-downlevel-iteration-for-es3-es5)

---

<div class="post-metadata">

**Author:** ![timfish](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/timfish/32/1566_2.png) [@timfish](https://discourse.aurelia.io/u/timfish)\
**Post date:** [November 11, 2017, 9:48pm UTC](https://discourse.aurelia.io/t/bundling-fails-when-minimizing-user-code/351/5 "2017-11-11T21:48:39Z")

</div>

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`