Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

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

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Level 2
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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!



View solution in original post

8 Replies

Avatar

Community Advisor

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. 

Avatar

Level 2

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

 

Avatar

Level 3

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

Avatar

Level 2

The Core WCM packages

  • core.wcm.components.config-2.19.0.zip
  • core.wcm.components.content-2.19.0.zip

are installed.

Avatar

Community Advisor

@tyronet42925573 :

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

 

 

Thanks,

Siva

 

Thanks,
Siva

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

Avatar

Level 2

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.

Avatar

Correct answer by
Level 2
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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!