AEM 6.5.13 Clientlibs CSS and JS not being included on Pages in Edit or Preview as Published on Author | Community
Skip to main content
T
Adobe Employee
ttseAdobe Employee
Adobe Employee
February 24, 2023
Solved

AEM 6.5.13 Clientlibs CSS and JS not being included on Pages in Edit or Preview as Published on Author

  • February 24, 2023
  • 4 replies
  • 5481 views

My client's AEM Author and Publish servers were originally AEM 6.3 and have been upgraded to AEM 6.5.13.

 

Currently, there is only 1 AEM site in production, which was originally developed on AEM 6.3 and has been upgraded to work on AEM 6.5.13.

This site uses the old static templates and the Client Library is in /etc/designs.

 

We are now developing a 2nd AEM site that will be deployed to the same AEM servers on Dev, QA, Stage, and Production.
The new site only uses the AEM Core Components and AEM Style System, map the CSS styles to the Core Components using the Page and Component Policies through the Page Template Editor.

 

On the developer's local AEM Author servers which are 6.5.13, the new  site does display with CSS and JS which are generated from the Client Library and included on the page with the command

 

 

 

<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-call="${clientlib.css @ categories='newsite.base'}"/> </sly>

 

 

 

When you view the page source the CSS generated by the clientlib  categories='newsite.base' is

 

 

<html lang="en"> <head> <meta charset="UTF-8"/> <title>en</title> <meta name="template" content="home-page"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="canonical" href="/content/newsite/us/en.html"/> <link rel="stylesheet" href="/etc.clientlibs/newsite/clientlibs/clientlib-base.css" type="text/css"> <script src="/etc.clientlibs/newsite/clientlibs/clientlib-dependencies.js"></script> <link rel="stylesheet" href="/etc.clientlibs/newsite/clientlibs/clientlib-dependencies.css" type="text/css"> <link rel="stylesheet" href="/etc.clientlibs/newsite/clientlibs/clientlib-site.css" type="text/css"> <script async src="/etc.clientlibs/core/wcm/components/commons/datalayer/v1/clientlibs/core.wcm.components.commons.datalayer.v1.js"></script> </head>

 

 


When the new site is deployed to the Dev, QA, and Stage AEM Author servers, the new site pages do not include the CSS in the <head> of the page.

 

 

<html lang="en"> <head> <meta charset="UTF-8"/> <title>en</title> <meta name="template" content="home-page"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="canonical" href="/content/newsite/us/en.html"/> </head>

 

 

 

Update 03/01/2023

I compared the error.log of localhost:4502 Author server to the one on the Dev Author server, and I found the following error on error.log of the Dev Author server where the ClientLibs are not working.

com.adobe.cq.wcm.core.components.internal.models.v1.ClientLibrariesImpl No categories detected. Please either specify the categories as a CSV string or a set of resource types for looking them up!


When I searched for this error it is reported in this open bug on AEM CORE Components

https://github.com/adobe/aem-core-wcm-components/issues/1808

Best answer by ttse
The solution is to use the older command

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"/>​


e.g.

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"/>​ <sly data-sly-call="${clientlib.css @ categories='newsite.base'}"/> </sly>
This will render the clientlibs from /apps in all instances of AEM 6.5.x
but the latest version of the clientlibs command does not work in all instances of AEM 6.5.x

e.g.
<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-call="${clientlib.css @ categories='newsite.base'}"/> </sly>​

¯\_(ツ)_/¯ so WEIRD RIGHT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!



4 replies

Ravi_Pampana
Community Advisor
Ravi_PampanaCommunity Advisor
Community Advisor
February 24, 2023

Hi,

I only assume the above scenario will happen when the .html file which includes the clientlibs are not part of the page (component) html, check whether there are any conditions which are not passing to execute the clientlibs html file. Add some html tags to make sure the .html file is executing. 

    T
    Adobe Employee
    ttseAdobe EmployeeAuthor
    Adobe Employee
    February 24, 2023

    The new site works fine on the developers, AEM Author servers on localhost:4502.
    The code in /apps/newsite/components/page/customheaderlibs.html

    <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='newsite.base'}"/>
</sly>

     generates the CSS links on the page 

    <link rel="stylesheet" href="/etc.clientlibs/newsite/clientlibs/clientlib-base.css" type="text/css">
<script src="/etc.clientlibs/newsite/clientlibs/clientlib-dependencies.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/newsite/clientlibs/clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/newsite/clientlibs/clientlib-site.css" type="text/css">
<script async src="/etc.clientlibs/core/wcm/components/commons/datalayer/v1/clientlibs/core.wcm.components.commons.datalayer.v1.js"></script>


    on the http://localhost:4502/content/newsite/us/en.html but it does not on the dev author server
    http://devauthor:4502/content/notaryexpress/us/en.html

     

      A
      aem1234567
      Level 2
      February 24, 2023

      Did you check if core components package is installed in dev and other environments where clientlibs are not getting added on page?

        SivakumarKanoori
        Community Advisor
        SivakumarKanooriCommunity Advisor
        Community Advisor
        February 27, 2023

        @ttse :

        Did you deploy the new clientlibrary (newsite.base)(where your css code physically exists) to the dev environment.

         

         

        Thanks,

        Siva

         

        Thanks,Siva
          T
          Adobe Employee
          ttseAdobe EmployeeAuthor
          Adobe Employee
          February 28, 2023

          I deployed the package from all/target/newsite.all-1.0.0-SNAPSHOT.zip which includes the /apps/newsite/clientlibs/clientlib-base

            T
            Adobe Employee
            ttseAdobe EmployeeAuthor
            Adobe Employee
            February 28, 2023

            This Clientlibs issue seems very similar to this Adobe Experience Manager article
            https://helpx.adobe.com/experience-manager/kb/client-library-overlays-aren-t-working-and-wrapper-div...
            Issue

            In AEM6.1 and later versions, there are system users that are included with AEM out of the box.  The users already have ACLs created under various paths such as /apps, /libs, /etc, /var, /content. and some of the subpaths.  If ACLs are accidentally overwritten during a data migration from an older AEM version to a newer one,  they can break various features in AEM.

            The /apps, /etc/clientlibs, /var/clientlibs, and /libs path ACLs are if overwritten, can break AEM:

            • Client library overlay files under /apps do not work.
            • The div tags which are generated around components do not show up
            • Other issues such as broken user interface, authentication.

            Resolution from the Adobe Experience Manager article

            1) Install a clean AEM instance (same version and patches as your destination upgrade instance).

            2) Follow the steps in this article to create an ACL package of the ACLs o be migrated.
            (The this article link  https://adobe--c.na79.visual.force.com/kA314000000P4If?lang=en_US is not available to the general public or no longer exists)

            3) Install the ACL package to the instance from step 1.

             

            4) Following the same method as step 2, create a package containing all ACLs from the new AEM instance.

            5) Install that package to the broken environment. This will ensure that all of the out-of-the-box ACLs are restored and your custom ACLs are ordered in the list after the out-of-the-box ones.

            6) In case the service users under /home/users/system were also deleted by the migration then you can also package and migrate the system users. Create a package of /home/users/system from the fresh AEM instance.

            7) Install the package to the broken environment.

              T
              Adobe Employee
              ttseAdobe EmployeeAuthorAccepted solution
              Adobe Employee
              March 17, 2023
              The solution is to use the older command

              <sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"/>​


              e.g.

              <sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"/>​ <sly data-sly-call="${clientlib.css @ categories='newsite.base'}"/> </sly>
              This will render the clientlibs from /apps in all instances of AEM 6.5.x
              but the latest version of the clientlibs command does not work in all instances of AEM 6.5.x

              e.g.
              <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"> <sly data-sly-call="${clientlib.css @ categories='newsite.base'}"/> </sly>​

              ¯\_(ツ)_/¯ so WEIRD RIGHT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!



                Terms & ConditionsAccessibility statement

                Loading footer...