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

[dartoism-inetum]

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:

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!

[Sanjay_Bangar · Accepted solution]

Hi @dartoism-inetum ,

     Can you try to install latest core component package.

Regards,

Sanjay

[dartoism-inetum]

Hi @Sanjay_Bangar, 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]

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