AEM WKND SPA Tutorial Issues

[JelenaS123]

This is my setup:

AEM version - 2022.6.7767.20220616T174806Z.

Node version - 16.16.0.

Npm version - 8.19.3

React - 16.12.0

Dependencies:

"@adobe/aem-core-components-react-base": "^1.1.8",

"@adobe/aem-core-components-react-spa": "^1.2.0",

"@adobe/aem-react-editable-components": "^1.1.6",

"@adobe/aem-spa-component-mapping": "^1.1.1",

"@adobe/aem-spa-page-model-manager": "^1.3.11"

AEM archetype:

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate

-D archetypeGroupId=com.adobe.aem

-D archetypeArtifactId=aem-project-archetype

-D archetypeVersion=35 -D appTitle="WKND SPA React"

-D appId="wknd-spa-react"

-D artifactId="aem-guides-wknd-spa.react"

-D groupId="com.adobe.aem.guides.wkndspa.react"

-D frontendModule="react"

-D aemVersion="cloud"

-D includeDispatcherConfig="n"

Issue 1:

I am facing the problem with Open Weather custom component from the tutorial:

Create a Custom Weather Component | Getting Started with the AEM SPA Editor and React | Adobe Experi...

Overall it works fine, but when I try to configure it as an author through the dialog, component do not update itself with the entered data as it normally would.

Browser console states the following:

GET http://localhost:4502/content/wknd-spa-react/us/en/home/jcr:content/root/responsivegrid/open_weather... 400 (Bad Request)

In order to see changes, I need to refresh the whole page, and the above mentioned GET request does not appear again.

Issue 2:

I am facing the problem with Banner component from the tutorial:

Extend a Core Component | Getting Started with the AEM SPA Editor and React | Adobe Experience Manag...

Image part works fine, while text is not showing up. I can see bannerText prop in CRXD, but it is missing from the JSON model and never arrives to the React. On the other hand, all props related to image are present in JSON model and they are transferred without any problem.

Both issues do not appear on another machine (same versions of the prerequisites, project setup, code base etc.)  and component works perfect.

Please suggest any methods you're aware of to troubleshoot these issues.

Thank you in advanced!

[Kiran_Vedantam]

Hi @JelenaS123 

Can you please add cq:editconfig for your first issue?

Reference: 

http://www.sgaemsolutions.com/2019/01/ootbcustom-cqlisteners-in-cqeditconfig.html

For your second issue, can you check if the model is having @Inject or @ValueMapValue property added? Also please add a log and check what value is coming?

Hope this helps!

Thanks,
Kiran Vedantam.

[JelenaS123]

Hi!

Thank you for fast answer.

However, none of your suggestions helped, but I managed to figure it out.

For the future reference, problem was that AEM version stated in main pom.xml of the project was wrong. I have changed it with the right one which I have on my machine, and both issues are solved with that.

All the best,

Jelena

[Kiran_Vedantam]

Hi @JelenaS123 

Thanks for sharing the resolution. 

The only this which concerns me is the issue reported and the solution doesn't match-up. If your pom version is not equal to the AEM version, the bundle won't startup and you would see an empty page.

But, glad that your issue is now resolved.

Thanks,
Kiran Vedantam.

[JelenaS123 · Accepted solution]

Hi @Kiran_Vedantam 

Possibly I have expressed myself wrong since AEM is new to me. So here is the more detailed explanation.

This is the pom.xml line that I have changed now:

<aem.sdk.api>2022.6.7767.20220616T174806Z-220500</aem.sdk.api>

Previously, after project creation, it was like this:

<aem.sdk.api>2022.11.9850.20221116T162329Z-220900</aem.sdk.api>

Besides those two issues, everything else worked fine before.

Hope this helped.

All the best,

Jelena

[tucker22]

I am having the same issue with this wknd AEM React tutorial.
I can see the bannerText value in CRXDE, but it is not in the JSON file. When I do a console log on the frontend, it is not coming in as a prop.