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

Tabs: Uncaught TypeError: Cannot read properties of undefined (reading 'container')

dartoism-inetum
Level 1
Level 1

Hi,

 

I'm building a tabs component based on the Adobe tabs core component. It works fine but on page load I have a js error that comes from the Adobe js lib:

 

tabs-1.jpg

I don't get why this error pops up in Adobe core code. Something must be wrong on my side but I can't figure out what.

Here is my tabs/_cq_htmlTag/content.xml code:

<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured"
          class="my-tabs"
          cq:tagName="div"/>


Here is my tabs/_cq_template/content.xml code:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="nt:unstructured">
    <item_1 jcr:primaryType="nt:unstructured"
            jcr:title="Tab 1"
            sling:resourceType="wcm/foundation/components/responsivegrid"/>
    <item_2 jcr:primaryType="nt:unstructured"
            jcr:title="Tab 2"
            sling:resourceType="wcm/foundation/components/responsivegrid"/>
</jcr:root>


Here is my tabs/.content.xml code:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:Component"
          jcr:title="Tabs"
          cq:isContainer="{Boolean}true"
          componentGroup="My.Content"
          sling:resourceSuperType="core/wcm/components/tabs/v1/tabs"
/>

 
Here is my tabs/_cq_editConfig.xml code:

<?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"
          jcr:primaryType="cq:EditConfig">
    <cq:listeners
            jcr:primaryType="cq:EditListenersConfig"
            afterchilddelete="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_DELETE"
            afterchildinsert="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_INSERT"
            afterchildmove="CQ.CoreComponents.panelcontainer.v1.AFTER_CHILD_MOVE"/>
</jcr:root>


Here is my tabs/tabs.html code:

<div data-sly-use.tabs="com.adobe.cq.wcm.core.components.models.Tabs"
     data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
     data-panelcontainer="${wcmmode.edit && 'tabs'}"
     id="${tabs.id}"
     class="overflowable-row cmp-tabs"
     data-cmp-is="tabs"
     data-cmp-data-layer="${tabs.data.json}"
     data-placeholder-text="${wcmmode.edit && 'Please drag Tab components here' @ i18n}">
  <ol data-sly-test="${tabs.items && tabs.items.size > 0}"
      role="tablist"
      class="overflowable-row-list cmp-tabs__tablist"
      aria-label="${tabs.accessibilityLabel}"
      aria-multiselectable="false">
    <li class="overflowable-row-item cmp-tabs__tab cmp-tabs__tab--all">${'All' @i18n}<span class="count"></span></li>
    <sly data-sly-list.tab="${tabs.items}">
      <sly data-sly-test.isActive="${tab.name == tabs.activeItem}"/>
      <li role="tab"
          id="${tab.id}-tab"
          class="overflowable-row-item cmp-tabs__tab${isActive ? ' cmp-tabs__tab--active' : ''}"
          aria-controls="${tab.id}-tabpanel"
          tabindex="${isActive ? '0' : '-1'}"
          data-cmp-hook-tabs="tab">${tab.title}<span class="count"></span></li>
      </sly>
  </ol>
  <div class="cmp-tabs-wrapper">
    <div data-sly-repeat.item="${tabs.items}"
         data-sly-resource="${item.name @ decorationTagName='div'}"
         id="${item.id}-tabpanel"
         role="tabpanel"
         aria-labelledby="${item.id}-tab"
         tabindex="0"
         class="cmp-tabs__tabpanel${item.name == tabs.activeItem ? ' cmp-tabs__tabpanel--active' : ''}"
         data-cmp-hook-tabs="tabpanel"
         data-cmp-data-layer="${item.data.json}"></div>
    <sly data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"
         data-sly-test="${(wcmmode.edit || wcmmode.preview) && tabs.items.size < 1}"></sly>
  </div>
</div>


Does anyone knows what's wrong?

Thanks for the help!

3 Replies
bangar50
Level 7
Level 7

Hi @dartoism-inetum ,

     Can you try to install latest core component package.

Regards,

Sanjay

dartoism-inetum
Level 1
Level 1

Hi @bangar50, that's version 2.13.0. I don't have this issue on my local author, only on a server one (same core components version). I can't update the version. What could be different?

Ankur_Khare
Community Advisor
Community Advisor

Kindly check the aem version and core component version in the server where its not working accordignly we can check further.