AEM Client lib ES6

Solve for AEM client lib minification for ES6 compiler using GCC

Author : TharunDate      :  Mar, 2020

AEM comes with default compiler compressYUI Compressor library which supports the ES5 and the codebase we had was using the ES6 even though we did not have any functional issues. Every time we deploy the snapshots in the lower environments with pipeline config of auto-deploy on commit to the development branch. AEM used to log in the logs the below error and it grew our log size to be huge. As AEM tries to compress the file every time the deployment happens and the first request reaches the publisher.

21.03.2020 18:33:33.513 *ERROR* [10.0.2.2 [1543609053532] GET /etc.clientlibs/my-app/clientlibs/clientlib-mylib.min.js HTTP/1.1] com.google.javascript.jscomp /apps/kryptonsquare-app/clientlibs/clientlib-mylib.js:8498: ERROR - this language feature is only supported for ECMASCRIPT6 mode or better: let declaration. Use --language_in=ECMASCRIPT6 or ECMASCRIPT6_STRICT or higher to enable ES6 features. symbol somVar = undefined; 

Solve the Problem using the GCC:
By setting the cssProcessor and jsProcessor properties on the cq:ClientLibraryFolder folder node, you can change how a particular client library is processed. This is, I think, well known and understood. For a good example of this, see how ACS Commons uses it for GCC minification

*********************************

<?xml version="1.0" encoding="UTF-8"?

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

   jcr:primaryType="cq:ClientLibraryFolder"

         jsProcessor="[default:none,min:gcc]"

         categories="[acs-commons.leaflet]"/>
*********************************

In addition to changing the processor from yui to gcc though, you can also pass additional options to GCC to tune the compilation process. For example, if your js source uses ES6/ES2015 syntax, as ours was, you can pass the languageIn option to have it transpile your ES6 code to ES5

jsProcessor="[default:none,min:gcc;languageIn=ECMASCRIPT_2015]"


In addition to languageIn, you can also pass compilationLevel, languageOut, or failOnWarning.

To combine multiple options, you simply separate each one with a semi-colon as follows.

jsProcessor="[default:none,min:gcc;languageIn=ECMASCRIPT_2015;compilationLevel=whitespace]"


Note that all of these options can also be set globally on the jsProcessor property of the com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl service configuration

Reference links:


For questions you can write to us here 


About Author:

Tharun Mittapalli is an Adobe certified multi-solution architect with experience of over a decade working in digital solutions e-commerce solutions. His expertise in Retail, health & financial domains completed dozens of projects from scratch.