Expand my Community achievements bar.

SOLVED

AEM React SPA - Extra Divs on Page Source

Avatar

Community Advisor

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?Screenshot 2023-08-01 at 12.11.24 AM.png

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

1 Accepted Solution

Avatar

Correct answer by
Level 5

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.

View solution in original post

8 Replies

Avatar

Community Advisor

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

Avatar

Correct answer by
Level 5

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.

Avatar

Employee

Hello, @Mahedi_Sabuj 

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

Avatar

Community Advisor

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

Screenshot 2023-12-28 at 1.46.24 PM.png

Avatar

Level 1

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",
to 
    "@adobe/aem-react-editable-components": {
      "version": "2.1.1",
 
Have you done any other changes to fix the empty div issue?
 
Thanks.