Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Ignite 1
Level 1
gajanank2729265
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
View profile

Avatar
Ignite 1
Level 1
gajanank2729265
Level 1

Likes

0 likes

Total Posts

6 posts

Correct Reply

0 solutions
Top badges earned
Ignite 1
View profile
gajanank2729265
Level 1

06-05-2021

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

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

505 likes

Total Posts

641 posts

Correct Reply

213 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile

Avatar
Boost 500
MVP
Vijayalakshmi_S
MVP

Likes

505 likes

Total Posts

641 posts

Correct Reply

213 solutions
Top badges earned
Boost 500
Give Back 50
Give Back 5
Ignite 10
Ignite 5
View profile
Vijayalakshmi_S
MVP

06-05-2021

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. 

 

Answers (1)

Answers (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,348 likes

Total Posts

3,226 posts

Correct Reply

916 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,348 likes

Total Posts

3,226 posts

Correct Reply

916 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

07-05-2021

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.