AEM React SPA - Extra Divs on Page Source

Forum|Forum|2 years ago
July 31, 2023
2 replies
2094 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

Level 4

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.