Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

React components not available in WKND SPA React

Avatar

Level 2

Hey all,

 

I'm trying to follow the tutorial for building the WKND SPA React project and am not able to see or edit the React components that come with the project. This fella here: https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/s...

 

When I view the page in the console, the Components tab does not list any components (according to the tutorial, I should see a Text and Layout component there).

wesbarichak_0-1654190237897.png

 

When I view the page as published and inspect the page, the Hello world string is contained in a <p> tag whereas I'd expect to see a script there that pulls in the content.

 

And, the console displays the following warnings:

wesbarichak_1-1654190412374.png

 

So, the page is looking for those minified js and css files and they aren't there. Is this likely the cause of the behaviors I'm seeing? I've tried invalidating the clients and clearing the browser cache but no luck.

 

I'm guessing there's an issue in my maven build that is causing those files not to get copied where they need to be, but I'm not really sure where to look. I'm very new to both Maven and AEM, so any tips would be greatly appreciated!

 

AEM: 6.5.12

JDK 11.0.5

Maven 3.8.5

Node.js (locally installed for this project): 14.16.1

Node.js (globally installed for another project): 16.14

10 Replies

Avatar

Community Advisor

Hi @wesbarichak 

May I know what is the maven archetype you are using to build project? Appreciate if you paste command here.

Regards,
Santosh

Avatar

Level 2

@SantoshSai 

 

mvn -B archetype:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=36 \
 -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="6.5.12"

Avatar

Community Advisor

@wesbarichak 

I believe it requires, core components - do you have installed them? https://github.com/adobe/aem-core-wcm-components
If you check here for /apps/wknd-spa-react/components/text component inherits to core components.

Screen Shot 2022-06-02 at 1.54.18 PM.png

Screen Shot 2022-06-02 at 1.59.12 PM.png

Avatar

Level 2

@SantoshSai I didn't install them manually or anything, but I assume they came with the maven archetype I built. I can see it in the package manager.

wesbarichak_0-1654192871571.png

 

Avatar

Community Advisor

I had similar issues, upgrading to core components 2.19.2 and restart instance worked! 

Avatar

Level 2

@SantoshSai hmm, I upgraded to 2.19.2, but that didn't seem to do it for me.

Avatar

Community Advisor

Hi @wesbarichak 

Followed below steps,
1.  Build project 

mvn -B archetype:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=36 \
 -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="6.5.12"

2. Switch to ui.frontend and run 

npm install

3. Switch back to main project and run below command

mvn clean install -PautoInstallPackage -Pclassic

Screen Shot 2022-06-03 at 11.22.28 AM.png

Avatar

Level 2

Sorry for the late reply! Got sidetracked with vacation and another project. Still no luck. I do get an interesting warning after building though. 

 

wesbarichak_0-1657206888244.png

 

Avatar

Community Advisor

Hi @wesbarichak ,
Try to get existing wknd react spa code from get and build at your local. It works. You can use this for your learning. 
Build as per you AEM, If using AEM 6.5.x use additional parameter while build as mantion
mvn clean install -PautoInstallSinglePackage -Pclassic

https://github.com/adobe/aem-guides-wknd-spa/tree/React/latest

Check this as well, If it helps.

https://youtu.be/cWEfSNrgvRE

Avatar

Community Advisor

Though I agree cloning project works but need to identify what's the problem in building project in batch mode when system specs are at its place.