AEM react component reflecting in react app but not r...

[gajanank2729265]

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!!!

[Vijayalakshmi_S · Accepted solution]

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. 

[arunpatidar]

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.