Expand my Community achievements bar.

SOLVED

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

Avatar

Level 2

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!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @dartoism-inetum ,

     Can you try to install latest core component package.

Regards,

Sanjay

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @dartoism-inetum ,

     Can you try to install latest core component package.

Regards,

Sanjay

Avatar

Level 2

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?

Avatar

Community Advisor

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