Error: uglify threw an exception while compiling:

I'm not able to minify ES6 files with apostrophe-assets. I'm getting the following error when try to minify with APOS_MINIFY=1 node app apostrophe:generation --create-bundle=prod-bundle

Error: uglify threw an exception while compiling:

/home/felix/github/fullpage-cms/lib/modules/materialize/public/js/vendor/cash.js

most likely there is invalid javascript in that file:

Unexpected token: name (evt)
Line 595 col 12


    at self.minifyScript (/home/felix/github/fullpage-cms/node_modules/apostrophe/lib/modules/apostrophe-assets/index.js:1099:17)
    at /home/felix/github/fullpage-cms/node_modules/async/lib/async.js:356:13
    at Immediate.iterate [as _onImmediate] (/home/felix/github/fullpage-cms/node_modules/async/lib/async.js:262:13)
    at runCallback (timers.js:810:20)
    at tryOnImmediate (timers.js:768:5)
    at processImmediate [as _immediateCallback] (timers.js:745:5)

When I add materialize minified files as a whole I have no problems. But the whole compiled materialize.min file is extreme huge. So I tried to import only specific components like discussed here: Use Materialize as modular components. This solution is exactly what I wanted and works fine but I can't generate production bundle. How can I implement ES6 support for apostrophe minifcation ?

Solution

The version of Uglify in use in Apostrophe 2.x does not necessarily support ES6 syntax, however certain supported browsers (mostly IE11) don't either, so you need to convert to ES5 anyway.

In our own projects, we use Webpack to build a site.js file that is then pushed as an asset to Apostrophe in the normal way. Babel is included in the Webpack configuration in order to ensure the output is compatible with IE11 and up, and this is also sufficient for Uglify.

We don't use any special tricks in that Webpack configuration, it is a typical configuration for compiling ES6+ to ES5. The important thing is to configure the output file to a path that is pushed as an asset to Apostrophe. You can then expect identical behavior in dev and production, i.e. with and without Uglify minification.

(The frontend code that ships with Apostrophe 2.x modules is ES5 to begin with, so it doesn't require this treatment. Apostrophe 3.x will be 100% ES2015, with a Webpack pipeline baked in, although we won't be pushing developers to use that pipeline at all for their project specific code - everyone inevitably winds up wanting some custom Webpack settings, so the technique of pushing the output file to Apostrophe will continue to be quite common.)