When you create AEM project Using Maven Archetype and use "frontendModule=react", Custom components doesn't render. | Community
Skip to main content
A
Anuj31005349h74z
New Participant
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
  • 791 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

EstebanBustamante
EstebanBustamanteAccepted solution
New Participant
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
    Mahedi_Sabuj
    Mahedi_Sabuj
    New Participant
    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
      Manu_Mathew_
      Manu_Mathew_
      New Participant
      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

       

        Terms & ConditionsAccessibility statement

        Loading footer...