Expand my Community achievements bar.

Get ready! An upgraded Experience League Community experience is coming in January.

jQuery v1.12.4-AEM is always loading on page

Avatar

Level 2

Hi All,

 

On my AEM site, jQuery v1.12.4-AEM is being loaded, even though v3.7.1 is specified in the package.json file. I also verified that the node_modules folder contains only jQuery 3.7.1, but I still can’t determine why the older 1.12.4-AEM version is being included.

 

My requirement is to remove the 1.12.4-AEM version and ensure that the site uses 3.7.1 instead. Could someone guide me on how to properly upgrade the jQuery version in AEM?

On my AEM site , jquery v1.12.4-AEM version is loading.  Even though we are using 3.7.1 version in package.json file. And in node modules also I see 3.7.1 version only but not able to find out how 1.12.4-AEM is loading. My requirement is to remove the 1.12.4-AEM version and use 3.7.1 version. Can you guys help how to upgrade the jquery version?

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

4 Replies

Avatar

Level 10

The jQuery v1.12.4‑AEM you see is AEM’s built‑in cq.jquery clientlib, which is loaded by default for AEM’s internal components (like Touch UI, ContextHub, etc.). Even if your package.json specifies jQuery 3.7.1, AEM will still load its own cq.jquery unless you

1) remove the piece of code calling the cq.query or

2) explicitly override it with a custom clientlib that replaces the default category.

 

1)

Append ?debugClientLibs=true to your page URL. In the page source, look for the cq.jquery category in the <ui:includeClientLib> or HTL data-sly-use/data-sly-call calls. As a last resort, by looking at the source code you can reverse-engeneering which part of the page is using AEM jQuery. Finally, you can update your code (or override the original AEM code by extending the page/component of interest)

 

2) There is an official page about upgrading jQuery version in AEMasCS: https://experienceleague.adobe.com/en/docs/experience-cloud-kcs/kbarticles/ka-27733#:~:text=replaces... 

Avatar

Community Advisor

Hi @NaveenT1 ,

Try this-

jQuery 1.12.4-AEM is embedded in AEM's core client libraries - it's not coming from your package.json.

Where it's loading from:

Granite/Coral UI client libraries (granite.jquery, cq.jquery)

AEM authoring overlays (dialog boxes, touch UI components)

Core Components dependencies

 

How to fix:

Check your page component - Look for clientlib categories like:

granite.jquery

cq.jquery

granite.ui

 

Remove/exclude unwanted clientlibs in your page HTL/JSP:

 

<sly data-sly-call="${clientLib.js @ categories='mysite.base', exclude='granite.jquery'}"/>

 

Don't embed AEM authoring libraries on publish - Check customheaderlibs.html and customfooterlibs.html

Load your jQuery 3.7.1 in your own clientlib with proper ordering

 

You cannot remove jQuery 1.12.4 from authoring environment (it breaks AEM UI)

On publish, you should only include YOUR custom clientlibs, not AEM's authoring libraries

Check if any legacy components are embedding cq.jquery category

 

View page source and search for "granite" or "cq" in script tags - that's your culprit.Claude is AI and can make mistakes. Please double-check responses.

Hrishikesh Kagane

Avatar

Employee

Hello @NaveenT1 

In AEM, JavaScript is loaded via client libraries (clientlibs), not from package.json or node_modules.
The jQuery 1.12.4-aem you see is the Adobe‑maintained fork shipped as /libs/clientlibs/granite/jquery, which is kept for backward compatibility and has security fixes backported.

Reference : https://experienceleague.adobe.com/en/docs/experience-cloud-kcs/kbarticles/ka-21173

Adobe does not support modifying or removing libraries under /libs, so we can’t "upgrade" that internal jQuery in place. The supported approach is:

1. Create a clientlib under /apps/<project>/clientlibs that contains jquery-3.7.1.js and sets categories=["jquery"] and replaces=["/libs/clientlibs/granite/jquery"]

Reference : https://experienceleague.adobe.com/en/docs/experience-cloud-kcs/kbarticles/ka-27733

2. Make sure your page / site clientlibs depend on the jquery category.

3. After deployment, confirm on the site that $.fn.jquery reports 3.7.1.

This way, your site uses jQuery 3.7.1, while AEM’s internal jQuery remains in place and supported.

Avatar

Community Advisor

In my case, we placed a redirect at CDN. The older jquery version is needed for AEM author and AEM purpose. Not for the public site. So public site CDN had rule to internal redirect and serve latest jquery. whereas author and local continues running with aem native version.