Cannot render any custom componente, with react as front module | Community
Skip to main content
October 19, 2021
Solved

Cannot render any custom componente, with react as front module

  • October 19, 2021
  • 2 replies
  • 908 views

Hello everyone, hope all is good!
I am creating a AEM project, using react as a frontend module. 
Below, is the React structure, to create a componente called 'mapa'.

My problem is, when i drag the component to the page, it doesnt show, but crx/de i can see there. 

 

How can i do, to render my componente to the page?

Edit: Even putting inline text, it still doesn't render anything.
Thanks for all!

 

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 Ankur_Khare

You can try below steps-

 

1. Check whether react js files are getting injected in ur page.

2. Just keep some text in your component.html file and see whether that is coming on the page or not.

3. If both are there then check any console errors.

4. Even that is not there then check in the aem logs if you sling model is throwign any error.

These are few steps for debugging.. more we can come up based on the console or error logs.

 

2 replies

Ankur_Khare
Community Advisor
Ankur_KhareCommunity AdvisorAccepted solution
Community Advisor
October 20, 2021

You can try below steps-

 

1. Check whether react js files are getting injected in ur page.

2. Just keep some text in your component.html file and see whether that is coming on the page or not.

3. If both are there then check any console errors.

4. Even that is not there then check in the aem logs if you sling model is throwign any error.

These are few steps for debugging.. more we can come up based on the console or error logs.

 

Vijayalakshmi_S
Level 10
October 20, 2021

Hi @thionor,

Per the rendering you have defined in the React mapa component, can you confirm if component exposes a property named text (this.props.text)

You can cross verify by accessing the respectivepage.model.json in author (Ex : http://localhost:4502/content/wknd-spa-react/us/en.model.tidy.json) -> search for mapa, cross check if the AEM component mapping is correct and it has property named "text" with value