When you create AEM project Using Maven Archetype and use "frontendModule=react", Custom components doesn't render. | Community
Skip to main content
A
Anuj31005349h74z
Level 2
September 7, 2023
Solved

When you create AEM project Using Maven Archetype and use "frontendModule=react", Custom components doesn't render.

  • September 7, 2023
  • 3 replies
  • 796 views

The similar problem has been mentioned before in this forum but I guess theres no solution found yet.

 

Solved: SPA React not displaying Custom Components - Adobe Experience League Community - 326448

 

Anyone knows what is happening here and how to fix it?

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

Can you explain what you consider a "Custom" component?

There is often a lack of understanding regarding what gets rendered in the AEM SPA Editor. My recommendation is to carefully read this article that delves into how the AEM SPA Editor works: https://experienceleague.adobe.com/docs/experience-manager-65/developing/spas/spa-overview.html?lang=en.

This article provides clear details on how components work and render within the SPA Editor. That being said, if your "custom" components do not meet these conditions, it won't render. That was clearly the issue in the thread you have pointed out.

I have used many custom components in the SPA Editor, and they work well when following the guidelines provided in the documentation, as outlined in this link: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/custom-component.html?lang=en.

 

Hope this helps.

3 replies

Manu_Mathew_
Community Advisor
Manu_Mathew_Community Advisor
Community Advisor
September 7, 2023

@anuj31005349h74z I believe for your SPA project you need to use SPA components, Normal AEM components would not render OOTB with the archteype.

https://experienceleague.adobe.com/docs/experience-manager-65/developing/spas/spa-overview.html?lang=en

 

    Mahedi_Sabuj
    Community Advisor
    Mahedi_SabujCommunity Advisor
    Community Advisor
    September 7, 2023

    Hi @anuj31005349h74z,

    As correctly pointed out by @manu_mathew_, you should create a custom component using the SPA editor framework. Here are the steps outlining how to create a custom component that is compatible with the SPA editor framework.

    https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/custom-component.html?lang=en 

    Mahedi Sabuj
      EstebanBustamante
      Community Advisor and Adobe Champion
      EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
      Community Advisor and Adobe Champion
      September 7, 2023

      Can you explain what you consider a "Custom" component?

      There is often a lack of understanding regarding what gets rendered in the AEM SPA Editor. My recommendation is to carefully read this article that delves into how the AEM SPA Editor works: https://experienceleague.adobe.com/docs/experience-manager-65/developing/spas/spa-overview.html?lang=en.

      This article provides clear details on how components work and render within the SPA Editor. That being said, if your "custom" components do not meet these conditions, it won't render. That was clearly the issue in the thread you have pointed out.

      I have used many custom components in the SPA Editor, and they work well when following the guidelines provided in the documentation, as outlined in this link: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/custom-component.html?lang=en.

       

      Hope this helps.

      Esteban Bustamante
        Terms & ConditionsAccessibility statement

        Loading footer...