java.lang.StackOverflowError/ScriptEvaluationException error in AEM 6.4 while rendering a React JS based Component

Avatar

Avatar

yashsavant

Avatar

yashsavant

yashsavant

13-03-2020

 

Scenario : I am passing a huge chunk of data using "data-props" property to a react component.
the json data passed to the component  consists of 1000+ lines of code.
Eg : <div data-component="myComponent" class='react-mini-app' data-application-name='AppName' data-props={
"key1": "${properties.value3 @CONTEXT="attribute"}",
"key2": "${properties.value2 @CONTEXT="attribute"}",
.
.
.
"key999": "${properties.value999 @CONTEXT="attribute"}",
"key1000": "${properties.value1000 @CONTEXT="attribute"}"
}
</div>
there are 1000+ such key and value pair passed to the component in .html

When I try to load the page where the component is authored, it gives me the following error :

stackoverflowerror.PNG

AEM 6.4

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

PuzanovsP

MVP

Avatar

PuzanovsP

MVP

PuzanovsP
MVP

17-03-2020

Hi Yash,

 

Ideally, you should be assembling one JSON and then outputting it with just one getter.

 

Have a look at this presentation, as it might come handy:

https://adapt.to/2019/en/schedule/a-non-spa-approach-for-aem-with-react.html

 

P.S. I am always happy to help you with consultation. Give me a shout at peter.puzanovs@hotmail.com

 

Regards,

Peter

Answers (1)

Answers (1)

Avatar

Avatar

PuzanovsP

MVP

Avatar

PuzanovsP

MVP

PuzanovsP
MVP

14-03-2020

Hi Yash,

 

Please check how you are passing these to the page. Most likely the issue is somewhere in your code. Rendering large json strings in Sightly does not cause stackoverflow's normally.

 

Regards,

Peter