Default Minification causing JS errors

[Shubham_borole]

Hi All

In AEM 6.2 we appear to be facing minification issues with YUI (JS Compressor) which is set at OSGi config - Adobe Granite HTML Library Manager. Following are the issues and observations.

Troubleshooting steps we took:

1. We were not getting the latest JS for our community calendar (issues we had fixed were showing up again and changes which should be in the JS were not there) on instances where minification is turned ON.
2. Putting ?debugClientLibs=true in the URL of the community calendar page would fix the issue (i.e the desired JS code would load) because AEM no longer serves minified files with this flag. However, putting ?abcd=1234 in the url did not fix it as it would have done if it was a dispatcher issue. Additionally, the publish instance (which has no dispatcher) was also having this problem.
3. We tried invalidating the clientside cache and rebuilding it (e.g. localhost:4503/libs/granite/ui/content/dumplibs.rebuild.html)
   While rebuilding clientlibs, we would get errors on community_calendar.min.js, clientlibs-screen-calendar-full.min.js and some OOTB we-retail sites and jQuery libs.
4. I checked the server logs and they would would say stuff like: ERROR GET /libs/granite/ui/content/dumplibs.rebuild.html HTTP/1.1]com.adobe.granite.ui.clientlibs.impl.YUIScriptProcessor [ERROR] mom = moment_ext_1.default.apply(null, args);
5. Files which failed on minification would show up as 404’s in the network tab on a page which loads them, while inspecting the Network tab in Chrome.
6. I turned off (YUI) minification in the OSGI > Configurations > Adobe Granite HTML Library Manager. This resolved the issue though this is not a permanent or a desired solution as we need minification.
7. This all pointed to YUI being unable to parse certain 3rd party JS libraries (Some supporting links: https://github.com/yui/yuicompressor/issues/234, https://github.com/Adobe-Marketing-Cloud/aem-sample-we-retail/issues/89)

Potential Solutions

1. Switch the minification engine to GCC sitewide (https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/clientlibs.html#SetSystemDefau...).
   • This fixes the minification issues with the fullcalendar.js library, however, we do get a failed compilation on the following clientlibs folder now:  /libs/dam/gui/components/s7dam/carousel/editor/clientlibs/editor.js.
   • This is the only error I got during minification compared to 5-6 errors using YUI before.
   • this may break authoring capabilities in classic UI as per https://github.com/Adobe-Marketing-Cloud/aem-sample-we-retail/issues/97#issue-156543390
2. Set minification at Clientlibs folder level. Try using GCC only on clientlibs folders that YUI can’t parse by adding the jsProcessor property to the offending clientlib folders:
   • As suggested by https://github.com/Adobe-Marketing-Cloud/aem-sample-we-retail/pull/103
   • This seems ideal, as we can limit the scope of the minification change and solve this issue.
   • But this only works for clientlibs that you can control.  Certain OOTB clientlibs folders are still failing on minification and we still face broken client libs issues. We can't safely add the jsProcessor properties to their clientlibs folders. This is definitely not a recommended option since we will have to put properties under "/libs/social/calendar/components/hbs/calendar/clientlibs" for example.
3. Disable minification at desired Clientlibs folder level. Try setting jsProcessor property default:none on clientlibs that YUI can’t parse. This property should remove these clientLibs folders from the minification process. In these cases, we may be able to provide a minified file by default.
   • But this only works for clientlibs that you can control. Since Adobe has included fullcalendar.js in their OOTB calendar code, that clientlibs folder will fail on minification and we still face broken client libs issues. We can't safely add the jsProcessor properties to their clientlibs folders. This is definitely no a recommended option since we will have to put properties under "/libs/social/calendar/components/hbs/calendar/clientlibs" for example

We are using AEM 6.2 SP1 FP3 (cq-socialcommunities-pkg-1.10.167.47.zip), Dispatcher version 2.2-4.1.5

Please advise on the issue.

[Shubham_borole]

Any comments/views on the issue?

[Peter_Puzanovs · Accepted solution]

Dear SnbAem,

Have you considered effort upgrading to later versions of AEM?

Alternatively, if your ONLY problem is minification, why not...

1) Route .js/.css requests via Dispatcher to NodeJS server

2) Setup latest NodeJS to get uncompiled JS from AEM

3) Compile your JS received from AEM via NodeJS and serve it to your authors/customers?

Regards,

Peter

[Shubham_borole]

Update:

The best approach for legacy AEM systems (versions < 6.4) appears to be using the GCC JS Processor only for client libraries which can't be parsed by YUI and otherwise leave YUI on as the sitewide clientside compliation engine. See this Adobe link for more information: https://helpx.adobe.com/experience-manager/kb/how-to-change-the-minification-engine-for-client-libra...