Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 1

 

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

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

6.4
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

7 Replies

Avatar

Community Advisor

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

Avatar

Level 1

Hi Peter, I dont think the problem is with the code here because if I refresh the page in my browser like 10-15 times, the error goes away and the component is loaded successfully. Also I tried to reduced the existing json data by half and it works fine with no errors. So I think it must be something else.
Thanks. 

Avatar

Community Advisor
Hi Yash, Are you passing JSON as pre-assembled string? Would it be possible for you to create a sample app that illustrates this problem with plain Sightly/Sling model? Regards, Peter

Avatar

Level 1

Hi Peter, sorry I wasn't clear with my description so I just edited the example I gave in my description. I am not passing any hardcoded json but I am populating it via dialog. Also if I hardcode the json in the data-props it works just fine. I think the problem is somewhere in traversing all those 1000 nodes in jcr:content to get the values.

Avatar

Correct answer by
Community Advisor

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

Avatar

Level 1

Thanks for this solution Peter! I assembled all those 1000+ json data properties in Java using and used a getter to output it  in html and it worked with no errors. Thanks.