Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Duplicate component in site view as published (VSCode local shows one)

Avatar

Level 2

I created a site with just one component, and my problem is that the component shows twice

This is my code, from local routes y just get one component and one string valled "formDescription"

AdrianFe_0-1725994463802.png



In local VSCode its shows OK; just one time

When i upload to AEM instance it duplicated
Image with duplicate div:

AdrianFe_3-1725994711687.png

 



I also try with empty render (delete formComponent and all), and the web is empty but the duplicate divs still there:

AdrianFe_2-1725994585908.png

In "Edit" in my page, there is just one "Layout Container" and one componente inside.
I also check logs, templates config and all i can or kwnown but i dont kwnow why the div is duplicated 

 

8 Replies

Avatar

Level 6

Hi @AdrianFe can you share the screenshot of the tree from your crx de as well? Please go to /content/your_project_name/page_on_which_the_component_is_dropped

Check if there are two components. Delete all if you see two and then try dragging and dropping on the page again.
There can be this case also the same component is already there on the template. Try to drag and drop it on another page created with different template.

Avatar

Level 2

Hi @kapil_rajoria,

AdrianFe_0-1726039352092.png



The element select in blue is the duplicate element, there is one. I will try to check templates but i also check them and i dont see anything bad, i will try to check other things again.

Thanks!!

Avatar

Level 6

Hi @AdrianFe please share the tree picture by going to:
http://localhost:4502/crx/de
In this go to the path:
/content/your_project_name/page_on_which_the_component_is_dropped
open the root and containers till your component is visible in the hierarchy.


Now, Check if you can see two component nodes there with same name (ending part could be different).

 

If there is only a single component there then the issue is related to js only. Some script is rendering it twice.

Avatar

Level 2

AdrianFe_0-1726048014097.png

Only one component "001" ....

But in local its render OK, not duplicate why AEM duplicate if is JS problem?

Thanks a lot!! i will try to check ...

Avatar

Level 6

Hi @AdrianFe please replace the component's code to one line of HTML for example: <p>test</p> and check if it gets printed twice.

Also, add console statements to check how many times the code is executed. Please share the info here.

Avatar

Level 2

Hi @kapil_rajoria 
I will do that soon.
I also check that if i add my component to another site that is working correctly it works and not duplicate
I just add my component here:

AdrianFe_0-1726056747475.png



And it shows only once and not duplicate. ¿Maybe something different in the site configuration can do the duplication?

Thanks agains!!

Avatar

Administrator

@AdrianFe Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!



Kautuk Sahni

Avatar

Level 2

Still not found the solution. If i add a simple <div> still duplicate

AdrianFe_0-1726219211371.png



I found that if i create the SPA inside a "Web React SPA Root Page Template", "PRUEBAROOT" is this component and "pruebaSPA" is "Web React Page Template"

AdrianFe_1-1726219244189.png


"pruebaSPA" duplicate and "Prueba2" is the same "Web React Page Template" and is not duplicate