How to resolve "java.lang.reflect.InvocationTargetException: null" error while adding component in the page

[sushmitha-srinivasan]

Hi

I'm getting below error in the error.log when using the core components in my content pages. 

The reason why I checked on the logs is dialog values are not getting fetched/displayed in the page and hence i checked the error logs and found below errors for Button and list component. 

11.06.2020 11:59:41.328 ERROR [0:0:0:0:0:0:0:1 [1591856981100] GET /content/sample/us/sample_home1.html HTTP/1.1] org.apache.sling.scripting.sightly.render.ObjectModel Cannot access method listItems on object com.adobe.cq.wcm.core.components.internal.models.v1.ListImpl@5b6e36a9 java.lang.reflect.InvocationTargetException: null

10.06.2020 20:01:17.889 ERROR [0:0:0:0:0:0:0:1 [1591799476187] GET /content/orora/us/orora_home.html HTTP/1.1] org.apache.sling.scripting.sightly.render.ObjectModel Cannot access method text on object com.adobe.cq.commerce.core.components.internal.models.v1.button.ButtonImpl@389ca05d java.lang.reflect.InvocationTargetException: null

Kindly please let me know what causing this error and how to resolve it. OOB Button and List components from core folders are not working properly.

I'm working in AEM 6.5.0 and my Core components are 2.7.0

[Surabhi_Katiyar · Accepted solution]

Can you confirm in which AEM version and which core component version are you facing this issue?

According to the historical versions, Core Components 2.3.0 and Core Components Extension 1.0.10 have 6.4.2.0 as their minimum requirement. The recommendation would, therefore, be to upgrade to the correct version.

Here is the list of Core Components Package compatibility

https://docs.adobe.com/content/help/en/experience-manager-core-components/using/versions.html

[sushmitha-srinivasan]

I'm working in AEM 6.5.0 and my Core components are 2.7.0

We are integrating AEM with Magento, CIF packages are also been installed along with AEM core components. 

[sushmitha-srinivasan]

I'm working in AEM 6.5.0 and my Core components are 2.7.0

[arunpatidar]

Can you share HTL code (data-sly-use part )which you are using to in custom component?

[sushmitha-srinivasan]

I actually copied the button component from the core(OOB) and tried to use it in my pages. Post looking at how it is getting displayed I wanted to extend it as per my need.

[sushmitha-srinivasan]

custom code that I wanted to use inside button.html is

<button data-sly-use.button="com.adobe.cq.wcm.core.components.models.Button"
data-sly-use.iconTemplate="icon.html"
data-sly-element="${properties.link ? 'a' : 'button'}"
class="${properties.actionsEnabled ? 'cmp-teaser__action-link' : 'cmp-button'}"
href="${properties.link}"
aria-label="${properties.accessibilityLabel}">
<sly data-sly-call="${iconTemplate.icon @ icon=button.icon}"></sly>
<span data-sly-test="${properties.text}" class="cmp-button__text">${properties.text}</span>

</button>

In all the places i have used properties.* was previously button.* ...this doesn't seem to display the button text and link I wanted so i used properties.* to display my dialog value.

[arunpatidar]

The code snippet is look like from Teaser component, the core components are associated with the resourceType. If you are using button component then use button component code.

[manising]

The model at https://github.com/adobe/aem-core-wcm-components/blob/master/bundles/core/src/main/java/com/adobe/cq... does not export a method like getListItems , It has  getItems() . So you can call it like shown below

data-sly-use.list="com.adobe.cq.wcm.core.components.models.List"

data-sly-list.item="${list.items}"

For com.adobe.cq.commerce.core.components.internal.models.v1.button.ButtonImpl,. I see it implemented in CIF framework https://github.com/adobe/aem-core-cif-components/blob/master/bundles/core/src/main/java/com/adobe/cq.... Did you install this framework?

[sushmitha-srinivasan]

Yes we are working in magento and Aem integration project... So we have installed CIF packages

[sushmitha-srinivasan]

Hi ...after changing data-sly-list.item="${list.items}" also it ins't working.

[sushmitha-srinivasan]

Hi Arun_Patidar... I have extended the Button component by using one of the classes from Teaser component and also i have added actionsEnabled property to add checkbox condition to my button. My actual Core Button Component and List Component codes are as follows

<button data-sly-use.button="com.adobe.cq.wcm.core.components.models.Button"
data-sly-use.iconTemplate="icon.html"
data-sly-element="${button.link ? 'a' : 'button'}"
class="cmp-button"
href="${button.link}"
aria-label="${button.accessibilityLabel}">
<sly data-sly-call="${iconTemplate.icon @ icon=button.icon}"></sly>
<span data-sly-test="${button.text}" class="cmp-button__text">${button.text}</span>
</button>

<ul data-sly-use.list="com.adobe.cq.wcm.core.components.models.List"
data-sly-list.item="${list.listItems}"
data-sly-use.template="core/wcm/components/commons/v1/templates.html"
data-sly-use.itemTemplate="item.html"
class="cmp-list">
<li class="cmp-list__item" data-sly-call="${itemTemplate.item @ list = list, item = item}"></li>
</ul>
<sly data-sly-call="${template.placeholder @ isEmpty=list.listItems.size == 0, classAppend='cmp-list'}"></sly>