Recently we had to integrate third-party minified javascript and css in an AEM client library. Unfortunatly this broke the build on Adobe Cloud. How did we solve this?
What’s the problem? Minification!
From our client, we received already minified javascript and styling we needed to integrate in the AEM website. Nothing too difficult, but the build on AEM Cloud finished with errors. On top of that, we could not download the logs, so we really were in the dark here.
After a lot of trial and error, we were able to find the commit causing the issue (we had pushed a lot of new features). It was the commit containing the minified javascript.
By default, AEM minifies all the client libraries. Usually, the client libraries consists of non-optimized javascript (ie. no minification nor linting) - so no issue there.
However, minification of already minified client libraries is not that straightforward and is apparently a build breaker 😲.
What’s the solution? Clientlib Preprocessor!
After a day or two, I remembered I worked on Client library preprocessing at a previous project. For each client library you can define what preprocessor to use for minification. One of the valid values is none, so no minification. After configuring the clientlib to not minify it, the build was again successful.
Conclusion
If you need to integrate minified javascript in your AEM client library, turn off the minification using the preprocessor configuration