Unable to add variable to the workflow

✅ Option 1: Use Clientlib Dependencies (Recommended in AEM)

Ensure your clientlibs are set up with proper dependencies:

// In /apps/your-project/clientlibs/your-script/.content.xml
<cq:ClientLibraryFolder
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[your.project.script]"
    dependencies="[your.project.handlebars]" />

Folder structure:

clientlibs/
├── handlebars/
│   └── js/
│       └── handlebars.min.js
├── your-script/
    └── js/
        └── yourcode.js (uses Handlebars)

✅ Option 2: Load Handlebars Before Your Script (Static HTML)

Manually ensure script order (somewhere in head.html):

<!-- Correct load order -->
<script src="/etc.clientlibs/your-project/handlebars.js"></script>
<script src="/etc.clientlibs/your-project/dependent-script.js"></script>

✅ Option 3: Wait for DOM and Check if Handlebars is Ready

Use a runtime check to ensure Handlebars is available:

document.addEventListener('DOMContentLoaded', function () {
    if (typeof Handlebars !== 'undefined') {
        const template = Handlebars.compile("<p>Hello, {{name}}!</p>");
        const html = template({ name: "World" });
        document.getElementById("output").innerHTML = html;
    } else {
        console.error("Handlebars not loaded!");
    }
});