Page.js not updating after clientlib change | Community
Skip to main content
MichaelNeu007
Level 2
October 15, 2024
Solved

Page.js not updating after clientlib change

  • October 15, 2024
  • 4 replies
  • 1391 views

I created a library that I only want to be loaded in authoring/editor environments.

 

      categories="[core.wcm.components.carousel.editor.overlay.v1,cq.authoring.editor.hook]"
      dependencies="[cq.authoring.editor.core]"
 
Initially I can see the code being added to page.js when rendering the authoring page. 
But then when I updated just the code of the library I can still see the old code in page.js.
If I checked the clientlib code in crx/de, I can see it deployed successfully, and the new code is there. 
 
So only the page.js file is somehow stuck on old version.
 
I am only having this issue in our test environment. Locally any updates are right away present. 
 
I tried visiting 
"https://myenvironmenturl.net"/libs/granite/ui/content/dumplibs.rebuild.html
but there I get 
Resource at '/libs/granite/ui/content/dumplibs.rebuild.html' not found: No resource found
so I am not sure why. 
 
Also shouldn't the rebuild just happen automatically? It that even the problem?
 
I also tried change the categories to v2 like this, but with no success.
categories="[core.wcm.components.carousel.editor.overlay.v2,cq.authoring.editor.hook]"
 
Any hints as to how to progress?
 
I also tried rendering it just from the component itself using 
<sly
    data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
    data-sly-test="${wcmmode.preview || wcmmode.edit}"
    data-sly-call="${clientlib.js @ categories = ['threedigital.carousel.overlay.v1']}"
/>
but my code is using "Granite.author.editables" which seems to not have any editabl word differently when not used in page.js context.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by MichaelNeu007

I have found a solution. 

I created a new library and made it a dependency of my old library that was added in page.js.

This way my code was loaded in a separate file and that file had the new code.

 

How to do that you can read here

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/introduction/clientlibs

 

Not perfect or but hey it worked.

 

Thanks all for contributions.

4 replies

EstebanBustamante
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
October 15, 2024

Hi, 


If you need your JavaScript to load when your component's dialog opens, you can use something like this: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/modify-dialog-value-after-dialog-submission-in-aem/m-p/376541 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="cq.authoring.dialog"/>

If you want your JavaScript to load when the Page editor loads, something like the example below should work:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="cq.authoring.editor.sites.page.hook"
dependencies="cq.authoring.editor.sites.page"/>

If you are trying to override a core component clientlib, you may need to check this: https://www.youtube.com/watch?v=0T9w8XCwtYA

 

Hope this helps

 

Esteban Bustamante
MichaelNeu007
Level 2
October 17, 2024

Hi. 
The second option is correct. I want to load my JS when the Page editor loads. 
I have changed to code to your example and again locally it works fine, but in testing environment page.js with old version of the code is loaded. 
I even tried the ?cache busting method but I still get the old library. 

 

Is there any non-ideal workaround where I could try placing the library that it would load ok?

martin_ecx_io
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
October 15, 2024

If this is happening on a test env and not locally one area to look at would be caching as often locally you would not be going via dispatcher etc which could be caching.  You could check this on your test env by appending query string params to the file path which would bypass dispatcher cache and force a load from the AEM instance.

 

you could enable clientlib versioning which would ensure the JS file path changes if the underlying files which make up the clientlib are modified.

MichaelNeu007
Level 2
October 17, 2024

I tried to append ?givemenewversion="10" to my page in testing environment but I still get the old code in page.js 

 

I think we have clientlib versioning enabled for clientlib-site but probably not for page.js. Is that even a clientlib?

martin_ecx_io
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
October 17, 2024

are you able to share the full path of the page.js file which isn't updating?

kautuk_sahni
Community Manager
Community Manager
October 16, 2024

@michaelneu007 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Kautuk Sahni
MichaelNeu007
MichaelNeu007AuthorAccepted solution
Level 2
October 25, 2024

I have found a solution. 

I created a new library and made it a dependency of my old library that was added in page.js.

This way my code was loaded in a separate file and that file had the new code.

 

How to do that you can read here

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/introduction/clientlibs

 

Not perfect or but hey it worked.

 

Thanks all for contributions.