AEM React SPA - Extra Divs on Page Source

[Mahedi_Sabuj]

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...

[tusharbias]

Please refer similar question here: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-react-spa-extra-divs-d...

[Mahedi_Sabuj]

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

[mahi1729 · Accepted 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.

[Mahedi_Sabuj]

Hi @mahi1729, Let me update aem react editore component package to v2.0.5 (https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...). and verify the empty div issue.

[kkPS]

Hello, @Mahedi_Sabuj 

How was the result? Did you resolve your issue by upgrading the mentioned package? Would appreciate some feedback!

[Mahedi_Sabuj]

Issue is resolved now by upgrading the aem-react-editable-components to v2.1.1 and empty div is no longer there.

[kkPS]

Appreciated!

[Surendra99]

Hi @Mahedi_Sabuj : I am still following the issue of empty div. I have performed below steps:

1) Created SPA React project using maven archetype 42.

2)Inside UI frontend module updated package.json and package-lock.json with below values:

package.json-

"@adobe/aem-react-editable-components": "^1.1.6",  to 

"@adobe/aem-react-editable-components": "^2.1.1",

package-lock.son-

 "@adobe/aem-react-editable-components": {

      "version": "1.1.11",

      "resolved": "https://registry.npmjs.org/@adobe/aem-react-editable-components/-/aem-react-editable-components-1.1....",

to 

    "@adobe/aem-react-editable-components": {

      "version": "2.1.1",

      "resolved": "https://registry.npmjs.org/@adobe/aem-react-editable-components/-/aem-react-editable-components-2.1....",

Have you done any other changes to fix the empty div issue?

Thanks.