ionic-framework: bug: IonicSwiper & swiper.js 9.0.0 TypeError: mod is not a function

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v4.x
v5.x
v6.x
v7.x
Nightly

Current Behavior

Using IonicSwiper for @ionic/angular 6.5.2 as plugins for swiper.js 9.0.0 will throw exception.

Expected Behavior

nativeElement.initialize

will throw

**_ERROR Error: Uncaught (in promise): TypeError: mod is not a function TypeError: mod is not a function

at HTMLElement.initialize (swiper-element-bundle.js:130:19)_**

Steps to Reproduce

.html

  <swiper-container
    [keyboard]="true"
    [pagination]="true"
    #swiper
    [init]="false"
  >
   <swiper-slide> ...  </swiper-slide>

.ts

    @ViewChild('swiper', { static: false }) swiper;

  ngAfterViewInit(): void {
  ...
    const params = {
      modules: [Keyboard, Pagination, Navigation, IonicSwiper], // without IonicSwiper works fine
    };

    Object.assign(this.swiper.nativeElement, params);

    this.swiper.nativeElement.initialize(); // this will throw error
}

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.8 (/Users/gab/.config/yarn/global/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.5.2 @angular-devkit/build-angular : 15.1.4 @angular-devkit/schematics : 15.1.4 @angular/cli : 15.1.4 @ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.6.2 @capacitor/android : 4.6.2 @capacitor/core : 4.6.2 @capacitor/ios : 4.6.2

Utility:

cordova-res : 0.15.4 native-run : 1.7.1

System:

NodeJS : v16.14.2 (/Users/gab/.nodenv/versions/16.14.2/bin/node) npm : 6.14.18 OS : macOS

Additional Information

The IonicSwiper modules look quite different than the IonicSwiper

passedParams.modules:

0: ƒ Keyboard({ swiper, extendParams, on, emit })

1: ƒ Pagination({ swiper, extendParams, on, emit })

2: ƒ Navigation({ swiper, extendParams, on, emit }) length: 1 name: “Navigation” prototype: {constructor: ƒ} arguments: (…) caller: (…) [[FunctionLocation]]: navigation.js:2[[Prototype]]: ƒ ()

3: name: “ionic” on: {afterInit: ƒ} [[Prototype]]: Object length: 4 [[Prototype]]: Array(0)

About this issue

Original URL
State: closed
Created a year ago
Reactions: 3
Comments: 17 (7 by maintainers)

Most upvoted comments

I merged https://github.com/ionic-team/ionic-docs/pull/2772 which notes that the migration guide is for Swiper 8 only. We are working on updating the migration guide for Swiper 9.

+12

liamdebeasi on Feb 15, 2023

Hi everyone,

We’ve identified a bug in Swiper 9 that impacts Ionic applications which is one of the reasons why upgrading has been challenging (even without a proper migration guide). It would be great if everyone could add a “+1” (thumbs up) reaction to this issue: https://github.com/nolimits4web/swiper/issues/6473

liamdebeasi on Mar 8, 2023

Another thing to check is to see if Swiper 7/8 works with Ionic (it should since the IonSlides migration guide was written based off Swiper 7). If it does, then there may have been a change in Swiper 9 that caused this issue.

Everyone who tries to migrate now runs into this issue. So either specify the Swiper Version in the migration or update the migration guide with Swiper 9 (once the bug is fixed) 😃

digaus on Feb 8, 2023

Hi, use version 8 of the swiper. The version 9 is not compatible.

npm i swiper@8

andrerds on Feb 2, 2023

Another thing to check is to see if Swiper 7/8 works with Ionic (it should since the IonSlides migration guide was written based off Swiper 7). If it does, then there may have been a change in Swiper 9 that caused this issue.

liamdebeasi on Feb 8, 2023

@liamdebeasi noticed. Still think it is an Ionic bug because switching to router-outlet fixes it. Guess some event loop is delayed or smth like that.

@CoooWeee the correct typing and solution for you:

@ViewChild("swiper") swiper?: ElementRef<{ swiper: Swiper }>

ngAfterViewInit() {
  this.swiper?.nativeElement.swiper.initialize()
}

muuvmuuv on Feb 8, 2023

Thanks for the report. Are you able to provide a minimal GitHub repo we can use to verify this behavior? I believe Swiper 9 was just released, so we will need to re-evaluate our migration guide to make sure it still works.

liamdebeasi on Feb 2, 2023

Hi everyone,

We’ve shipped Swiper 9 migration guides on the docs.

Angular: https://ionicframework.com/docs/v7/angular/slides React: https://ionicframework.com/docs/v7/react/slides Vue: https://ionicframework.com/docs/v7/vue/slides

The original issue should be resolved, but let me know if there are any questions. Thanks!

liamdebeasi on Mar 21, 2023

Works with Ionic, using Swiper 7 and later 8 since deprecation was announced of ionic-slides. Guess its just the WebComponents switch in 9.

Already created an issue on Swiper side. Guess I need to make an rollback and wait ^^

…the Bot is a little bit sus 😄

muuvmuuv on Feb 8, 2023

The behavior of ion-router-outlet and router-outlet differ slightly which may be the reason why it works with router-outlet. I still recommend filing an issue with the Swiper team. I am not familiar with the internals of Swiper 9, so the Swiper team will have a better idea of how Swiper mounts and unmounts.

liamdebeasi on Feb 8, 2023

Just got the same, posted it on Swiper but then noticed that the issue is with <ion-router-outlet> doing things and therefor the browser calls disconnectCallback on all web components.

https://github.com/nolimits4web/swiper/issues/6367

@liamdebeasi here a Repl: https://codesandbox.io/s/headless-pine-lrnpui?file=/src/app/home/home.page.html

muuvmuuv on Feb 8, 2023