Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Proxy component throwing error (Uncaught TypeError: window.CQ.CoreComponents is undefined)

Blaiirrr
Level 2
Level 2

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

8 Replies
vmadala
Level 3
Level 3

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:

 

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
Level 2
Level 2

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
Community Advisor
Community Advisor

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
Level 2
Level 2

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.

jordanl32063034
Level 1
Level 1

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
Level 2
Level 2

Thanks for posting @jordanl32063034 - 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).

jordanl32063034
Level 1
Level 1

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

 

SocialTaylor
Level 3
Level 3

Hey @jordanl32063034 !

 

Could you explain how you added that as an embed? We are seeing this error: 'Uncaught TypeError: Cannot read properties of undefined (reading 'container')' with our set-up using Webpack and are trying to get this resolved asap. Any help pointing us in that direction to have it working would be greatly appreciated.