Experience fragment not rendering SPA React components | Community
Skip to main content
N
NikhilLa1
January 29, 2025

Experience fragment not rendering SPA React components

  • January 29, 2025
  • 3 replies
  • 957 views

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 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

Tethich
Community Advisor
TethichCommunity Advisor
Community Advisor
January 29, 2025

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-html-cannot-render-resource/td-p/631267

 

    N
    NikhilLa1Author
    January 29, 2025

    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?

     

     

    AmitVishwakarma
    Community Advisor
    AmitVishwakarmaCommunity Advisor
    Community Advisor
    February 2, 2025

    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.

      N
      NikhilLa1Author
      February 3, 2025

      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.

      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
       
      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity Manager
      Community Manager
      February 10, 2025

      @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
      Terms & ConditionsAccessibility statement

      Loading footer...