Adobe Experience Manager Sites & More

Blaiirrr · 6/23/21

Hi - I've been struggling with my proxy Accordion component for a few days now. I've tested many different scenarios with varying degrees of success. From the simplest setup with only the single component node (allowing everything from /libs to be referenced), to copying all files (from GitHub) to my proxy component - I'm always getting JS errors in my browser console (depending on the scenario, the errors are related to window.CQ, CQ.CoreComponents, or Coral being undefined). Note that I can successfully add, configure, and preview the component - it's just some of the editing/runtime functionality that is not working.

I am new to AEM, and am working on a project setup by a third party (which is no longer available). I was instructed to create a /clientlibs/site/webpack.include.js file to load the component less/js (instead of relying on the supplied .txt files) due to 'the way the project is setup' - which helped - but I have a feeling this 'setup' is the main reason the CQ/Coral objects/items aren't 'available' to the JS.

Any guidance would be very much appreciated.

Using AEM 6.5.5.0

vmadala · 6/23/21

Hello @Blaiirrr ,

It seems the issue with author mode only. So custom javascript is loading in author mode and causing this JS issue, there are 2 ways to check the component level

custom javascript&colon;

1. Do you have any extra clientlib javascript for this Accordion proxy component, check "extraClientlibs" property on cq:dialog node if node is there.

2. Is there any "clientlib" folder under this proxy component.?

Let me if you need more.

Blaiirrr · 6/24/21

Thanks @vmadala - I haven't added any files besides webpack.include.js (which I notice none of the Adobe 'proxy component' documentation mentions). As I mentioned, even just creating the single node (below) produces the 'CQ' JS errors in editor and preview - when it seems like this should basically work straight away.

<?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"
    cq:isContainer="{Boolean}true"
    jcr:primaryType="cq:Component"
    jcr:title="Accordion (Core)"
    jcr:description="Displays content as an accordion"
    sling:resourceSuperType="core/wcm/components/accordion/v1/accordion"
    componentGroup="Base"/>

I'm pretty sure I just need to find a way to get the OOB JS to load/run correctly in our 'webpack' environment - note that I don't even really know what this means since I'm new(ish) to the whole AEM development thing.

Ritesh_Mittal · 6/23/21

Hi @Blaiirrr ,

Can you provide some more information in order to find the root cause-

1. "it's just some of the editing/runtime functionality that is not working." - Are those client side functionalities or you are hitting backend service to get data which is not being reflected, do you see any error in logs?

2. Assuming the issue is for few components, and others are working fine, right?

3. Since you mentioned about webpack, so I hope you are good with that (packing the libraries from ui.frontend module and copying them to ui.apps). Do you see any issue while deploying the code to AEM instance?

5. And I hope all required bundles are active including WCM core bundles.

6. Can you provide few screenshots of console/network tab errors.

Blaiirrr · 6/24/21

Hi @Ritesh_Mittal - thank you for your response. I'm trying to keep the proxy component as clean and simple as possible. I get the 'CQ' JS errors in both editor and preview (see my other response to vmdala), and am just hoping to get the OOB component working as intended - then I may look into customizing the HTML and CSS (and possibly JS).

I think all of our other components are custom (created by the third party) so have not seen any other proxy/core components working or otherwise.

I've just run into some technical difficulties and my local instance is playing up a bit, so when I get it working again I'll see if I can get more info/screenshots to help with troubleshooting.

jordanlong · 7/1/21

I am in the process of upgrading components from 2.8.0 to 2.17.0 and ran into this same issue with the Accordion component.

The error is coming from accordion/v1/accordion/clientlibs/site/js/accordion.js:618 for a listener for the deeplinks related to tabs and accordion.

window.addEventListener("load", window.CQ.CoreComponents.container.utils.scrollToAnchor, false);

The error thrown in the browser console is:

Uncaught TypeError: window.CQ.CoreComponents is undefined

This is happening to the component that is a simple proxy with no additional overlays to the front-end files.

I tried adding these lines of code to the accordion.js just to initialize the util, which actually exists in the containerUtil.js at apps/core/wcm/components/commons/site/clientlibs/container/js/containerUtils.js

window.CQ = window.CQ || {};
window.CQ.CoreComponents = window.CQ.CoreComponents || {};
window.CQ.CoreComponents.container = window.CQ.CoreComponents.container || {};
window.CQ.CoreComponents.container.utils = {};

That "got rid" of the error at the time, but then when using the accordion component I just get a new error about the deeplinks function:

Uncaught TypeError: window.CQ.CoreComponents.container.utils.getDeepLinkItem is not a function

Going to continue to mess around with it.

Blaiirrr · 7/1/21

Thanks for posting @jordanlong - are you working with a 'webpack setup' too?

Yes, this is basically what I experienced. I had eventually tracked down the initial error related to the deep-linking function and 'disabled' it so I could continue testing (knowing that I would need to re-enable it later), but there were simply more CQ errors found in the other (editor/editorhook) scripts.

For now, a colleague has found a fix for a basic third-party Accordion component so am moving forward with that to give our authors something to work with - but I really wish the core component would work, as it is more intuitive and has more features.

If anyone finds out how to get the core Accordion component to work in this 'webpack' environment, please do let me know (as I would prefer to use it).

jordanlong · 9/30/21

I am starting to use webpack, and it is weird that the clientlib needed isn't coming through. When I add the core.wcm.components.accordion.v1 to my site clientlibs with the embed, just like the readme suggests, it should call the core.wcm.components.commons.site.container as a dependency from the Adobe Accordion component clientlibs, but it seems to have issues for some reason.

I got around this by just adding core.wcm.components.commons.site.container to my site clientlibs as an embed and the error went away.

I do see in GitHub that they are making updates to the accordion js related to this dependency, not sure what else to do related to webpack to make it load correctly.

https://github.com/adobe/aem-core-wcm-components/pull/1011/files