Tab component is throwing an error

[kirankumar-Matham96]

When we use tab components on our page, we can see an error repeating for every tab. The error is:

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'enabled') at headless.esm.js:40:17961 at headless.esm.js:25:2935 at produce (headless.esm.js:18:53354) at headless.esm.js:25:2911 at Array.reduce () at l (headless.esm.js:25:2815) at headless.esm.js:18:5466 at headless.esm.js:37:75322 at y (headless.esm.js:18:4466) at headless.esm.js:25:18985

[jantoun-coveo]

@kirankumar-Matham96 The error looks like coming from headless and not the tab component could you share the code that you are using to add the tab with ?

[reemagupta11]

I have also started seeing this error.

Any update on this ?

[jantoun-coveo]

@reemagupta11 can you share the version and the code you are using for the component in your page ?

[saurabhsastra]

I can see the similiar Error :

SchemaValidationError: The following properties are invalid:

value: value is an empty string.

at https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:77177
at ty.validate (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:77187)
at wy (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:81248)
at Sy (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:81396)
at https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:176371
at r (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:58910)
at https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:54:1187
at Array.forEach (<anonymous>)
at nj.enableExcludedFacets (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:54:1144)
at nj.updateState (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:54:869) Action dispatch error facetOptions/facet/enable Object

Coveo atomic version at my end is - '2.46.1'

[saurabhsastra]

Also , analytics call is throwing 400 Bad Request Error. - since my organization is in AU region, wondering why analytics not getting initialized appropriately

[jantoun-coveo]

I can see the similiar Error :

SchemaValidationError: The following properties are invalid:

value: value is an empty string.

at https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:77177
at ty.validate (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:77187)
at wy (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:81248)
at Sy (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:81396)
at https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:176371
at r (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:36:58910)
at https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:54:1187
at Array.forEach (<anonymous>)
at nj.enableExcludedFacets (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:54:1144)
at nj.updateState (https://unpkg.com/custom-tab@1.0.6/dist/my-custom-components/p-0d04f739.entry.js:54:869) Action dispatch error facetOptions/facet/enable Object

Coveo atomic version at my end is - '2.46.1'

@saurabhsastra how are you initializing the tab as in error log looks like the facet enable is not being dispatched correctly, are you using enabled facet on the tab ?

[jantoun-coveo]

Also , analytics call is throwing 400 Bad Request Error. - since my organization is in AU region, wondering why analytics not getting initialized appropriately

This is not related to the tab component please ask this question on the community portal

[rorourkecaij]

I am seeing the exact same SchemaValidationError, and it appears regardless of whether I omit excludedFacets, set excludedFacets to an empty string, or set excludedFacets to a comma separated list of facet names. My organization is also having an issue with connection to analytics. It seems very unlikely that this would be the cause of the error, but we will resolve the analytics issue and I can report if this is somehow the cause of the bug.

[rorourkecaij]

I am seeing the exact same SchemaValidationError, and it appears regardless of whether I omit excludedFacets, set excludedFacets to an empty string, or set excludedFacets to a comma separated list of facet names. My organization is also having an issue with connection to analytics. It seems very unlikely that this would be the cause of the error, but we will resolve the analytics issue and I can report if this is somehow the cause of the bug.

We have resolved the issue regarding analytics calls and the SchemaValidationError persists, so as would make sense it seems that they are unrelated.

[jantoun-coveo]

In order to troubleshoot this efficiently please add code snippets of:

• How the component is being imported into your project.
• How the component is being used in the HTML code. -Atomic and Headless version that is being used.

[rorourkecaij]

How the component is being imported (this is in a nextjs application, effectively this gets translated to a normal html script tag in the document head. The onload is there to ensure that the custom-tab unpkg script is fully loaded before attempting to render the search interface): <Script type="module" src="https://unpkg.com/custom-tab" onLoad={() => setScriptLoaded(true)} />

How the component is being used in the html code: ` // outside of the React component const productTabs = [ { label: "All", expression: '', isActive: true }, { label: "eDictionnaire", expression: '@caij_product=="eDictionnaire"', isActive: false }, { label: "Biblio", expression: '@caij_product=="Biblio"', isActive: false }, { label: "Jurisprudence", expression: '@caij_product=="Jurisprudence"', isActive: false }, { label: "Topo", expression: '@caij_product=="Topo"', isActive: false }, { label: "eDoctrine", expression: '@caij_product=="eDoctrine"', isActive: false }, { label: "eLois", expression: '@caij_product=="eLois"', isActive: false }, { label: "Legislation", expression: '@caij_product=="Legislation"', isActive: false } ]

// Inside of the React component, within the AtomicSearchInterface

{productTabs.map(tab => tab !== null && )}

`

The atomic-react-wrapper version is 2.8.4 which seems to use atomic version 2.53.0 and headless version 2.45.0.

Also I was mistaken when I said the same error is printed whether excludedFacets is omited, set to an empty string, or set to a comma separated list of facets (my apologies). When omited or set to a comma separated list of facets, the error is client.js:1 TypeError: Cannot read properties of undefined (reading 'split') at nj.connectedCallback (p-0d04f739.entry.js:54:582). When set to an empty string, the error is the above SchemaValidationError.