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

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)

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)

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