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>

WARNING

It is important to note here that newer versions of AEM 6.5 and AEMaaCS restrict overlaying certain paths which is the reason for needing to explicity define the path.

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.

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

Adding the esModule binding won't automatically enable ES modules which you will need to enable in the next step.

Add esModule ClientLib property

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

<?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"/>

TIP

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.

Next Steps

• Providing AEM Vite access to read your ClientLibs.
• Configure your front end to make full use of Vite.