[React] Unexpected error when adding List Component to home page in AEM editor.

Adobe-Marketing-Cloud / aem-guides-wknd-events

Step by Step guide to creating a Single Page Application to use with AEM

48 stars 34 forks source link

[React] Unexpected error when adding List Component to home page in AEM editor. #56

Closed ehelbig1 closed 5 years ago

ehelbig1 commented 5 years ago

Local Environment Before filing an issue, verify that the prerequisite tools/software are installed:

AEM 6.4 + SP2
Java 1.8
Apache Maven (3.3.9 or newer)
Node.js v10+
npm 6+

Describe the issue Unable to add List component to home page in the AEM editor.

Where in the tutorial are you experiencing an issue?

In Chapter 3 in List Component Step # 10 ->

Go to http://localhost:4502/editor.html/content/wknd-events/react/home.html
Click on Components in side panel. Drag and drop List Component onto page.
No List Component is created.

Additional context Happened when following tutorial from beginning. Pulled the react/chapter-3 github branch while debugging and same issue occurs. The react Styleguide looks as expected with the new List Component. List Component is visible in the components section in side panel of AEM editor but after dragging and dropping onto home page it does not persist. All other component work as expected.

godanny86 commented 5 years ago

Hi @ehelbig1 is there any errors thrown? or when you drag it on to the page it just shows up blank? It sounds like a potential caching issue, either on the AEM side or in the browser. Try the following:

Invalidate the Cache using: http://localhost:4502/libs/granite/ui/content/dumplibs.rebuild.html this is an AEM tool to ensure that fresh version of client libraries are served
Start a new browser session/clear cache + cookies or start an incognito session

ehelbig1 commented 5 years ago

Awesome, that did the trick! Thank you so much. I had rebuild all the libraries earlier, from that same link, with no luck. I'll have to remember this solution for the future. Is there anyway to prevent this from happening again?

ehelbig1 commented 5 years ago

And is the /content/wknd-events/react.model.json only created dynamically or is there a way to view it?

godanny86 commented 5 years ago

Great to hear @ehelbig1, If you are constantly pushing changes via Maven or with a tool like Repo (see https://helpx.adobe.com/experience-manager/kt/platform-repository/using/local-aem-dev-environment-article-setup.html#setup-integrated-env > Visual Studio Code) you'll encounter the cache issue less. I also tend to develop always using an incognito browser. But when in doubt, the invalidate cache tool is one of the first things I use when troubleshooting.

Yes /content/wknd-events/react.model.json is created dynamically, so there won't be a file on AEM or elsewhere that you can "view" other than making the request in the browser: http://localhost:4502/content/wknd-events/react.model.json...

ehelbig1 commented 5 years ago

Ok, thank you for the advice and the solutions!