Uncaught TypeError: swipers[swiperContainer.id].on is not a function

@RgnYLDZ, i have fixed the issue and created MR . please review it once.

Thank you @abhishek_gupta1 , you are very quick :)

I believe the Undefined array key "type" error is gone now.

But the initial issue still exists. I still get the below error after more than 3 swipers on the home page;

drupal.js?v=10.2.7:64 Uncaught TypeError: swipers[swiperContainer.id].on is not a function
    at swiper_formatter.js?v=10.2.7:44:45
    at Array.forEach (<anonymous>)
    at Object.attach (swiper_formatter.js?v=10.2.7:29:67)
    at drupal.js?v=10.2.7:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.2.7:162:34)
    at drupal.init.js?v=10.2.7:32:12
    at HTMLDocument.listener (drupal.init.js?v=10.2.7:20:7)

@abhishek_gupta1 thanks, I will definitely include this in the next version.

@RgnYLDZ
1. Are you by chance loading swiper main js in a "strange" way?. Like somewhere in html.twig template or similar and not part of formatter (and views style)
2. I assume you did try in a few different browsers with a clean cache?
3. Are all swiper instances made by View, or? some yes some not? can you export the view in yml and share by chance?

hey @nk_ ,

In this project I only use swiper with views. Nothing in html.html.twig nor page.html.twig (in the past I did some crazy things yes :)

I'm using swiper from remote on all templates. Is there a preferred swiper version I should use locally?

Also its not a specific view, its happening for any 4th swiper view. But here is an export for one of them;

uuid: b9d72b37-75b2-4a7d-ba82-c2153c7d4fd4
langcode: tr
status: true
dependencies:
config:
- field.storage.commerce_product.field_benzer_urunler
module:
- commerce_product
- swiper_formatter
id: urun_liste_moduller
label: 'Ürün liste (diğer modüller)'
module: views
description: ''
tag: ''
base_table: commerce_product_field_data
base_field: product_id
display:
default:
id: default
display_title: Default
display_plugin: default
position: 0
display_options:
title: 'DİĞER MODÜLLER'
fields:
field_benzer_urunler:
id: field_benzer_urunler
table: commerce_product__field_benzer_urunler
field: field_benzer_urunler
relationship: none
group_type: group
admin_label: ''
plugin_id: field
label: ''
exclude: false
alter:
alter_text: false
text: ''
make_link: false
path: ''
absolute: false
external: false
replace_spaces: false
path_case: none
trim_whitespace: false
alt: ''
rel: ''
link_class: ''
prefix: ''
suffix: ''
target: ''
nl2br: false
max_length: 0
word_boundary: true
ellipsis: true
more_link: false
more_link_text: ''
more_link_path: ''
strip_tags: false
trim: false
preserve_tags: ''
html: false
element_type: ''
element_class: ''
element_label_type: ''
element_label_class: ''
element_label_colon: false
element_wrapper_type: ''
element_wrapper_class: ''
element_default_classes: true
empty: ''
hide_empty: false
empty_zero: false
hide_alter_empty: true
click_sort_column: target_id
type: entity_reference_entity_view
settings:
view_mode: card
group_column: target_id
group_columns: { }
group_rows: false
delta_limit: 0
delta_offset: 0
delta_reversed: false
delta_first_last: false
multi_type: separator
separator: ', '
field_api_classes: false
pager:
type: none
options:
offset: 0
items_per_page: 0
exposed_form:
type: basic
options:
submit_button: Uygula
reset_button: false
reset_button_label: Sıfırla
exposed_sorts_label: 'Sıralama anahtarı'
expose_sort_order: true
sort_asc_label: Artan
sort_desc_label: Azalan
access:
type: none
options: { }
cache:
type: tag
options: { }
empty: { }
sorts: { }
arguments:
product_id:
id: product_id
table: commerce_product_field_data
field: product_id
relationship: none
group_type: group
admin_label: ''
entity_type: commerce_product
entity_field: product_id
plugin_id: numeric
default_action: default
exception:
value: all
title_enable: false
title: All
title_enable: false
title: ''
default_argument_type: product
default_argument_options: { }
summary_options:
base_path: ''
count: true
override: false
items_per_page: 25
summary:
sort_order: asc
number_of_records: 0
format: default_summary
specify_validation: false
validate:
type: none
fail: 'not found'
validate_options: { }
break_phrase: false
not: false
filters:
status:
id: status
table: commerce_product_field_data
field: status
entity_type: commerce_product
entity_field: status
plugin_id: boolean
value: '1'
group: 1
expose:
operator: ''
style:
type: swiper_formatter
options:
grouping: { }
swiper: null
template: vertical_slider
caption: ''
row:
type: fields
query:
type: views_query
options:
query_comment: ''
disable_sql_rewrite: false
distinct: false
replica: false
query_tags: { }
relationships: { }
css_class: ''
header: { }
footer: { }
display_extenders: { }
cache_metadata:
max-age: -1
contexts:
- 'languages:language_content'
- 'languages:language_interface'
- url
tags:
- 'config:field.storage.commerce_product.field_benzer_urunler'
diger_moduller:
id: diger_moduller
display_title: Block
display_plugin: block
position: 1
display_options:
display_extenders:
metatag_display_extender:
metatags: { }
tokenize: false
simple_sitemap_display_extender: { }
block_description: 'Diğer modüller (Ürün)'
cache_metadata:
max-age: -1
contexts:
- 'languages:language_content'
- 'languages:language_interface'
- url
tags:
- 'config:field.storage.commerce_product.field_benzer_urunler'

I took a quick look into your export but couldn't find anything like "suspicios". Can you make a screenshots of Development console in browser where we can see html/markup of all swipers on the page?

Also, you might have more than actual, or valid swipers, in the object containing multiple swipers

swipers[]

or that is as much as it should be but some are malfunctioning. You could also maybe put

console.log(swipers)

at the specific place and inspect and/or share here what's there. See screenshot.

I think I found the reason/clue;

So I have a product card display for my products. Where the images inside that card are displayed also as a swiper from the field formatter.

Since the view that is listing my products as swiper is using the card view I presume the swipers inside swipers get confused somehow and we get a swiperception issue :)

Therefore I believe that the issue is not actually multiple swipers but swipers that has swipers inside them.

Tho as a note; the first view that has swiperception is working fine. the ones after that are broken.

Good, so I would like to mark this issue as postponed. In the meantime, I would not be much surprised if things would work in your case as long as every Swiper has unique ID attribute, meaning parent and nested ones. Did you check on that?

All swipers are created from within drupal. I know that views will give them unique id's but I'm not sure how to give them unique ID attributes for image field formatter swipers.

Image field formatters also generate unique ID. I asked if you can confirm that in your case all have unique ID? Including nested ones? Or some have very the same?

Automatically closed - issue fixed for 2 weeks with no activity.