Getting Started with React and AEM SPA Editor - Chapter 0: No Content Rendered On Home Page

[johna91]

Hello All,

I am trying to make a simple React SPA in AEM by following the steps in Adobe Experience Manager Help | Getting Started with React and AEM SPA Editor - Chapter 0 

The build is successful, but when I go to the home page as directed at the end of chapter 0 I get a blank page.

I do get some warnings on the build I'll place that below:

[INFO] Running 'npm install' in D:\AEM training\aem-guides-wknd-events\react-app

[WARNING] npm WARN ts-pnp@1.0.1 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.

[WARNING] npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):

[WARNING] npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

[WARNING] npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\chokidar\node_modules\fsevents):

[WARNING] npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

[ERROR]

[INFO] audited 36347 packages in 35.9s

[INFO] found 69 vulnerabilities (63 low, 6 high)

[INFO]   run `npm audit fix` to fix them, or `npm audit` for details

I'll also place the reactor summary below:

Package installed in 219ms.

[INFO] ------------------------------------------------------------------------

[INFO] Reactor Summary:

[INFO]

[INFO] aem-guides-wknd-events ............................. SUCCESS [  0.912 s]

[INFO] WKND Events - Core ................................. SUCCESS [  4.976 s]

[INFO] WKND Events - React App ............................ SUCCESS [01:43 min]

[INFO] WKND Events - UI apps .............................. SUCCESS [  6.202 s]

[INFO] WKND Events - UI content ........................... SUCCESS [  1.625 s]

[INFO] ------------------------------------------------------------------------

[INFO] BUILD SUCCESS

[INFO] ------------------------------------------------------------------------

[INFO] Total time: 02:01 min

[INFO] Finished at: 2019-04-19T07:57:24-05:00

[INFO] Final Memory: 49M/335M

[INFO] ------------------------------------------------------------------------

Can anyone help me with this?

[Gaurav-Behl]

Do you mean that http://localhost:4502/editor.html/content/wknd-events/react/home.html shows a blank page?

Could you validate that you've below packages installed in http://localhost:4502/crx/packmgr

[johna91]

Yes I do mean http://localhost:4502/editor.html/content/wknd-events/react/home.html​ shows a blank page. I also checked the package manager and packages listed are installed.

[Gaurav-Behl]

I assume that you have installed core components  Releases · adobe/aem-core-wcm-components · GitHub

Check the browser console logs/error.log for any warnings/errors

[johna91]

Yes,

Here is a snippet of my packages:

Here are the warnings/errors from the browser:

[johna91 · Accepted solution]

The issue was that I needed to install the latest Service Pack. After installing aem-service-pkg-6.4.4.zip everything works as it should.