AEM React SPA - Extra Divs - Decoration | Community
Skip to main content
satishak9342628
satishak9342628
October 29, 2019
Solved

AEM React SPA - Extra Divs - Decoration

  • October 29, 2019
  • 3 replies
  • 1635 views

We are working on AEM-React SPA integration. We see a set of extra Divs (Decorator DIV wrapping component) in the rendered HTML in the stand alone react app (npm start) bloating up the html. Is there any way to remove them from bloating the html ? There are lots of examples on the internet, and forums

But not much is discussed about how to fix this in the AEM React SPA. Have tried the example in the links mentioned but they don't work. Can i get help on how to remove the decorator DIV wrapping component in the AEM React SPA ?

I am using AEM 6.4.6.

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 joerghoh

When you mean "AEM React SPA": are you using the SPA Editor feature of AEM? There I would wonder if this happens.

Thus you likely have a standard component, which is using React to render. And in that case I wonder why the mentioned examples cannot are not working.

For AEM your component is not special in any way. Have you tried with a very rudimentary, non-React component? Does it work there?

Jörg

3 replies

joerghoh
Adobe Employee
joerghohAdobe EmployeeAccepted solution
Adobe Employee
October 29, 2019

When you mean "AEM React SPA": are you using the SPA Editor feature of AEM? There I would wonder if this happens.

Thus you likely have a standard component, which is using React to render. And in that case I wonder why the mentioned examples cannot are not working.

For AEM your component is not special in any way. Have you tried with a very rudimentary, non-React component? Does it work there?

Jörg

satishak9342628
satishak9342628Author
October 30, 2019

Yes, I am using the SPA Editor feature of AEM with React components. Followed the WKND AEM react SPA tutorial and added a couple of custom react components. I see these extra DIV in the Preview and react app rendered pages' source as well.

Non-react components work as expected with the fixes mentioned in the links.

joerghoh
Adobe Employee
joerghohAdobe Employee
Adobe Employee
October 30, 2019

Hi,

When you are using the SPA editor, you should have a full SPA without AEM rendering any markup; instead you should just consume JSON from AEM.

Or do I misunderstand your approach?

regards,

Jörg

Terms & ConditionsAccessibility statement

Loading footer...