Skip to content
On this page

ClientLibs

As Vite natively builds ES modules by default, it is important to have AEM generate <script module> tags for your ClientLibs.

Update your page component(s)

The first change needed will be switch from the built-in clientlib.html HTL component to the AEM Vite template. Start by opening all of your page components and change:

<sly
  data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
></sly>

to

<sly
  data-sly-use.clientlib="/apps/aem-vite/granite/sightly/templates/clientlib.html"
></sly>

Add esModule HTL binding

Within the same file(s), locate all your data-sly-call instances for clientlib.<type> where <type> refers to all or js. Update all instances where you require ES module support. Adding the esModule binding won't automatically enable ES modules which you will need to enable in the next step.

<sly
  data-sly-test="${clientLibCategoriesJsHead}"
  data-sly-call="${clientlib.js @ categories=clientLibCategoriesJsHead, esModule=true}"
></sly>

Add esModule ClientLib property

Next, open your ClientLibs folder/configuration and after allowProxy add the esModule property which instructs the custom ClientLibs handler in AEM Vite to generate <script> tags with the module attribute.

See the example below.

<?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"
  allowProxy="{Boolean}true"
  esModule="{Boolean}true"/>

Please Note

Only add the esModule property to ClientLibs that will be consuming ES bundles generated by Vite. Adding it to non-ES modules won't break things in general but is not recommended.

Apache 2.0 Licensed. Vite wording and logos are property of Evan You. Adobe and AEM wording and logos are property of Adobe Inc.