Expand my Community achievements bar.

Nomination window for the Adobe Community Advisor Program, Class of 2025, is now open!

Experience fragment not rendering SPA React components

Avatar

Level 1

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

Screenshot 2025-01-29 at 6.32.14 PM.png

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:resourceSuperTypecore/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

Topics help categorize Community content and increase your ability to discover relevant content.

5 Replies

Avatar

Level 9

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

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/no-renderer-for-extension-...

 

Avatar

Level 1

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?

 

 

Avatar

Level 7

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.

Avatar

Level 1

Hi @AmitVishwakarma 

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.

Screenshot 2025-02-03 at 1.30.07 PM.pngScreenshot 2025-02-03 at 1.30.25 PM.png

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

@adobe/cq-react-editable-components which is deprecated. The examples online seem to use the newer @adobe/aem-react-editable-components package. Not sure if this would cause component rendering to fail on experience fragment authoring.
 
Would appreciate if you have any additional thoughts on this
 

Avatar

Administrator

@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!



Kautuk Sahni