Expand my Community achievements bar.

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

AEM react component reflecting in react app but not reflecting in AEM server

Avatar

Level 2

Hi All,

 

I am trying to create the first react component in my local and did the set up as per the weekend tutorial available.

When first time I run the app, all the changes were coming fine on the aem as well as react app (localhost:4502 and localhost:3000). When i created the new component in react and mapped it to newly created component in ui apps, and deployed the same in my local, I can see the component in react app but same component is not coming up in aem.

 

I have created aem component in ui apps with basic dialog fields.

I have created the sling model and exported the same using Jackson exporter

I have created the react component and mapped the same to aem component.

I have added the component mapping in import-components.js

I have deployed the code in my local instance

 

As soon as deployment is completed, I am able to see new component in the side rail. but when I am dragging and dropping the component on page, I am not seeing the component in aem page.

 

If I check the json at http://localhost:4502/content/reactproject/en.model.json, I can see my component.

when I check the react page http://localhost:3000/content/reactproject/en/home.html I can see the component here also. but only at http://localhost:4502/content/reactproject/en/home.html I am not able to see my component.

 

Has anyone faced this issue ? kindly let me know if I am missing any step here.

 

One thing I observed here is when I do the rebuild clientlib, my changes get reflected. But I need to do this every single time when I created a new component. Is there any other work around ?

 

Thanks in advance!!!

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @gajanank2729265,

Could you please let know if your new component changes reflects in clientlib-react.js(Entire react side changes are compiled and available via this JS and added to spa project specific clientlib) when accessing from author/editor mode instance(Suggest to check the file from being in Network -> Filter request by JS -> access that file in new browser tab) before you could trigger rebuild clientlibs. 

 

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @gajanank2729265,

Could you please let know if your new component changes reflects in clientlib-react.js(Entire react side changes are compiled and available via this JS and added to spa project specific clientlib) when accessing from author/editor mode instance(Suggest to check the file from being in Network -> Filter request by JS -> access that file in new browser tab) before you could trigger rebuild clientlibs. 

 

Avatar

Community Advisor

Hi,

The issue could be with cache, try disabling browser cache.

I have recently built the react components and never seen this issue, worked locally as well as on AEM Author.



Arun Patidar