Solved
Tabs: Uncaught TypeError: Cannot read properties of undefined (reading 'container')
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' @3164305}<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!
