We have a React SPA project where we're trying to introduce experience fragments to export into Target. The issue we're currently facing is that when we try to add a custom component into the parsys on an editable experience fragment template, the component is not showing up and the logs show the following error
GET /conf/teq/settings/wcm/templates/experience-fragment-template/initial.html HTTP/1.1] org.apache.sling.servlets.get.impl.DefaultGetServlet No renderer for extension html, cannot render resource TemplatedResourceImpl, type=teq/components/ctabutton, path=/conf/teq/settings/wcm/templates/experience-fragment-template/initial/jcr:content/root/ctabutton
As it's seen in the image above, only the breadcrumbs component is displayed where as the CTAButton is hidden.
It seems that only components having a sling:resourceSuperType property set to a core component(For example, sling:resourceSuperType = core/wcm/components/breadcrumb/v2/breadcrumb) are rendered.
Custom components have been mapped using the MapTo() function.
The sling:resourceSuperType property of xfpage component is set to cq/experience-fragments/components/xfpage.
The clientLibs .js and .css files have been added into customheaderlibs.html and customfooterlibs.html files.
Not sure what else is missing for the components to be rendered as expected.
The custom components show up on page templates or also in experience fragments added onto a page through the experience fragment component.
Would appreciate any ideas on what we might be missing.
Thanks
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
Hi @NikhilLa1
Can you please first check if you are not by any chance missing the component teq/components/ctabutton from your AEM instance ?
Couple of similar topics:
https://experienceleague.adobe.com/en/docs/experience-cloud-kcs/kbarticles/ka-24080
Hi Tethich,
Appreciate your quick response and for sharing those issue links. I tried restarting AEM as well, but didn't help.
I can confirm that ctabutton is present at the node - apps/teq/components/ctabutton.
In fact, all these components are displayed as expected within the site pages and even when XFs are added on site pages
It seems to fail only for templates with the xfpage type.
What do you think could cause this?
Views
Replies
Total Likes
The issue likely lies in the configuration of your Experience Fragment template.
Here's how to fix it:
1. Check sling:resourceSuperType: Ensure your custom component (e.g., ctabutton) has the correct sling:resourceSuperType, like:
sling:resourceSuperType="core/wcm/components/experiencefragment/v1/experiencefragment"
2. Component Compatibility: Verify that your custom component is compatible with the Experience Fragment system.
3. clientlibs: Ensure your JS and CSS files are properly included in the template%E2%80%99s header/footer.
4. Template Rendering: Check if the xfpage template allows custom components to render, especially for SPA-based content.
5. Component Path: Double-check the component path and MapTo() mapping to ensure it’s correct.
Thanks a lot for your response. Please find the details related to your point below
1. The custom components don't have a sling:resourceSuperType defined as you can see in the screenshot below. Yet, the components are correctly rendered on the site pages. The custom components don't have a custom_component.html file either.
2. How do we check for component compatibility?
3. Yes, all clientlibs are added within headers
4. How do we check if an experience fragment template allows rendering of custom components? 5. The MapTo() function is imported from the package
Views
Replies
Total Likes
@NikhilLa1 Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies