Issue with core wcm components

[KunalNa1]

I wanted to use core wcm components but all of them were not showing. Only a few were showing up and working fine.
Then I stumbled upon this
Using Core Components | Adobe Experience Manager
I downloaded and installed zip package
Release Core WCM Components 2.29.0 · adobe/aem-core-wcm-components · GitHub

After this all the components started showing up in CRX but none is working

On checking the bundles  

I saw the class implementations were different ( CarouselImpl) whereas in component htl file it was Carousel and path was different . Even after manually fixing it components are not working

[KunalNa1]

THis is the place where I tried changing the path

[AmitVishwakarma]

Hi @KunalNa1 ,

This happens when the HTL file references a model class that does not align with the actual class exposed by the installed bundle.

HTL files reference interfaces (like Carousel) but if the bundle is not exposing them correctly (or they’re not exported at all), AEM can't resolve the model and silently fails.

Try below steps:

Step 1: Use the Correct Interface
Make sure you are referencing the correct interface that is actually exported by the bundle.
From Core Components, the correct class (interface) to reference should be:

com.adobe.cq.wcm.core.components.models.Carousel

NOT internal.models.v1.CarouselImpl – that is the implementation, not to be referenced in HTL.

Step 2: Check Exported Packages in the Bundle
From the screenshot, the com.adobe.cq.wcm.core.components.models.* package is not exported by the bundle.
That means AEM cannot resolve the model class from HTL using data-sly-use.
Step 3: Fix This with Sling Model Exporter
In Core Components 2.29.0 and up, the recommended approach is to rely on Sling Model Exporter annotations, not hardcoded paths.

Here’s the fix:
Do NOT directly reference the Java class.
Instead, let the cq:dialog and component properties drive the component logic.

Example fix inside the component HTL:

<div data-sly-use.carousel="carousel"
     data-sly-test="${carousel}">
    <ul data-sly-list.item="${carousel.items}">
        <li>${item.title}</li>
    </ul>
</div>
​

And in the component node (/apps/community-components/carousel), make sure the sling:resourceType is pointing to core/wcm/components/carousel/v1/carousel.

Note:

  - Don’t reference Java class paths directly.
  - Use resource types: core/wcm/components/carousel/v1/carousel
  - Let HTL adapt automatically using Sling models.

Regards,
Amit

[SantoshSai · Accepted solution]

Hi @KunalNa1,

I think, this appears to be a compatibility issue between the Core Components version and the AEM version being used.

According to Adobe’s official compatibility table:
Core Components Version Compatibility Matrix

Core WCM Components 2.29.0 is supported only on AEM as a Cloud Service and AEM 6.5.19.0+.

If you're on an older AEM version (like 6.5.10 or 6.5.14), that would explain the misalignment in model bindings and component behavior.

Suggested Next Steps:

1. Check your current AEM version.

2. Refer to the compatibility matrix and download a version of Core Components aligned with your AEM version.

   • For example, AEM 6.5.14.0 supports up to Core Components 2.21.0.

3. Reinstall the matching version using the corresponding ZIP package.

Reference: https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/versions

Let me know your AEM version if you’re unsure, I can help point you to the exact Core Components version you need.

[kautuk_sahni]

@KunalNa1 Did you find the suggestion helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you.