Switching from ionic-selectable to @ionic-selectable/angular triggers many errors in Ionic 6

[manu2504]

Since I switched from ionic-selectable 4.9.0 to @ionic-selectable/angular 5.0.0-alpha.19, I got many errors in my console:

[ng] Error: node_modules/@ionic/angular/node_modules/@ionic/core/dist/types/components.d.ts:3320:15 - error TS2320: Interface 'HTMLIonActionSheetElement' cannot simultaneously extend types 'IonActionSheet' and 'IonActionSheet'.
[ng]   Named property '"buttons"' of types 'IonActionSheet' and 'IonActionSheet' are not identical.
[ng] 
[ng] 3320     interface HTMLIonActionSheetElement extends Components.IonActionSheet, HTMLStencilElement {
[ng]                    ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] 
[ng] 
[ng] Error: node_modules/@ionic/angular/node_modules/@ionic/core/dist/types/components.d.ts:3320:15 - error TS2320: Interface 'HTMLIonActionSheetElement' cannot simultaneously extend types 'IonActionSheet' and 'IonActionSheet'.
[ng]   Named property '"enterAnimation"' of types 'IonActionSheet' and 'IonActionSheet' are not identical.
[ng] 
[ng] 3320     interface HTMLIonActionSheetElement extends Components.IonActionSheet, HTMLStencilElement {
[ng]                    ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] 
[ng] 
[ng] Error: node_modules/@ionic/angular/node_modules/@ionic/core/dist/types/components.d.ts:3320:15 - error TS2320: Interface 'HTMLIonActionSheetElement' cannot simultaneously extend types 'IonActionSheet' and 'IonActionSheet'.
[ng]   Named property '"htmlAttributes"' of types 'IonActionSheet' and 'IonActionSheet' are not identical.
[ng] 
[ng] 3320     interface HTMLIonActionSheetElement extends Components.IonActionSheet, HTMLStencilElement {
[ng]                    ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] 
[ng] 
[ng] Error: node_modules/@ionic/angular/node_modules/@ionic/core/dist/types/components.d.ts:3320:15 - error TS2320: Interface 'HTMLIonActionSheetElement' cannot simultaneously extend types 'IonActionSheet' and 'IonActionSheet'.
[ng]   Named property '"leaveAnimation"' of types 'IonActionSheet' and 'IonActionSheet' are not identical.
[ng] 
[ng] 3320     interface HTMLIonActionSheetElement extends Components.IonActionSheet, HTMLStencilElement {
[ng]                    ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] 

List goes on and on.

It seems that @ionic-selectable/[email protected] has a peer dep on "@ionic/core": "5.x", while my project is an Ionic 6 project.

Any way to solve that?

My ionic info:

Detail

Ionic:

   Ionic CLI                     : 6.20.4 (/Users/manu/.nvm/versions/node/v14.20.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.4.0
   @angular-devkit/build-angular : 15.0.3
   @angular-devkit/schematics    : 15.0.3
   @angular/cli                  : 15.0.3
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.6.1
   @capacitor/android : not installed
   @capacitor/core    : 4.6.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.1

System:

   NodeJS : v14.20.1 (/Users/manu/.nvm/versions/node/v14.20.1/bin/node)
   npm    : 9.1.2
   OS     : macOS Monterey

Steps to reproduce:

1. npm i -g @ionic/cli (to install Ionic v6)
2. ionic start test-ionic-selectable blank --type=angular
3. cd test-ionic-selectable
4. Follow steps 1 & 2 of https://www.npmjs.com/package/@ionic-selectable/angular#getting-started
5. Run ionic serve
6. See the errors

[saviocamacam]

Same problem

[andrea-DO]

Have you found any solutions?

[Sebastian-Elstadt]

adding "skipLibCheck": true in my tsconfig.json file solved this problem for me.

[itshazlan]

have you found the solution???