AEM React SPA - Extra Divs on Page Source

Forum|Forum|2 years ago
July 31, 2023
2 replies
2087 views

Hi Community Members, I have created AEM SPA (React) project using AEM ArcheType v41. Installed the package on local AEM v6.5.16 environment without making any changes. In "View as Publish" mode, I found some extra divs (Red Marked) on Inspect Element. Anyway to remove those extra divs?

Same issue for AEMaaCS as well. https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-spa-editor-react-empty-divs/td-p/572051

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 mahi1729

My understanding is this. Every component comes with its own empty-text placeholder and is appended below the actual component markup. When not in author an empty div tag is generated. Since it is a code level issue, I dont think there is an easy way around this. Perhaps the issue is remediated in v2.x but the design of v2.x is completely different from 1x. If its a new project migrate to v2.x to see if the issue persists.

See https://github.com/adobe/aem-react-editable-components/tree/v2.0.5/src/components for distinguishing differences/migration steps. Hope this gives us some insight.

T

Tushar_Gupta

Adobe Employee

Mahedi_Sabuj

Author

Community Advisor

Hi @tushar_gupta, I checked the discussion before asking the question here. There are no concrete solution available in the link you shared.

Mahedi Sabuj

mahi1729Accepted solution

My understanding is this. Every component comes with its own empty-text placeholder and is appended below the actual component markup. When not in author an empty div tag is generated. Since it is a code level issue, I dont think there is an easy way around this. Perhaps the issue is remediated in v2.x but the design of v2.x is completely different from 1x. If its a new project migrate to v2.x to see if the issue persists.

See https://github.com/adobe/aem-react-editable-components/tree/v2.0.5/src/components for distinguishing differences/migration steps. Hope this gives us some insight.