Proxy component throwing error (Uncaught TypeError: window.CQ.CoreComponents is undefined) | Community
Skip to main content
Blaiirrr
Blaiirrr
Level 2
June 23, 2021

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

  • June 23, 2021
  • 3 replies
  • 4155 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

vmadala
vmadala
Level 3
June 24, 2021

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
    BlaiirrrAuthor
    Level 2
    June 25, 2021

    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 and Adobe Champion
      Ritesh_MittalCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      June 24, 2021

      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
        BlaiirrrAuthor
        Level 2
        June 25, 2021

        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.

          J
          jordanlong-1
          July 1, 2021

          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.

           

            Prabu01
            Prabu01
            August 21, 2023

            Is this issue resolved when updating the core components version to 2.17?  window.CQ.CoreComponents.container.utils.scrollToAnchor, false);

            Terms & ConditionsAccessibility statement

            Loading footer...