Trato de usar swiper como alternativa a ion-slides porque no puedo usarlo para renderizado dinámico.

He instalado swiper@7.0.1 en package.json correctamente, pero cuando importo los paquetes de acuerdo con los documentos de swiper en el componente Vue (Home.vue), la CLI responde con el siguiente error:

 This dependency was not found: * swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=ts To install it, you can run: npm install --save swiper/vue

Entonces, realmente no sé si el problema es el archivo tsconfig.json , porque como "prueba" instalé vue3-circle-progress y funciona correctamente.

Avíseme si tengo un problema con tsconfig o si no tengo el paquete de swiper correcto.

Gracias.

Archivos:

Inicio.vue

 <template> <ion-page> <ion-header> <ion-toolbar class="custom-toolbar"> <ion-buttons slot="start"> <ion-menu-button auto-hide="false"></ion-menu-button> </ion-buttons> <ion-buttons slot="end"> <ion-icon class="icon-size mr-4" src="assets/icon/pray.svg" /> </ion-buttons> <ion-title class="text-white">Main Title</ion-title> </ion-toolbar> </ion-header> <ion-content :fullscreen="true"> <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)"> <ion-refresher-content></ion-refresher-content> </ion-refresher> <div class="px-4"> <h1 class="text-gray-800 font-bold text-3xl mt-5 mb-3"> {{ $t("home.discover") }} </h1> </div> <swiper :slides-per-view="3" :space-between="50" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> <circle-progress :is-bg-shadow="true" /> </ion-content> </ion-page> </template> <script lang="ts"> import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, IonSlides, IonSlide, IonIcon, menuController, } from "@ionic/vue"; import { GetNewests } from "../services/home"; import { onMounted, ref } from "vue"; import { Swiper, SwiperSlide } from "swiper/vue"; import CircleProgress from "vue3-circle-progress"; import "vue3-circle-progress/dist/circle-progress.css"; export default { name: "Home", components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonRefresher, IonRefresherContent, IonIcon, Swiper, SwiperSlide }, setup() { const newests = ref([]); menuController.enable(true); const generalOpts = { slidesPerView: "auto", zoom: false, loop: false, grabCursor: true, }; function doRefresh(event) { console.log("Begin async operation"); setTimeout(() => { console.log("Async operation has ended"); event.target.complete(); }, 2000); } async function getNewests(limit = 4, type = 0) { try { const res = await GetNewests(limit, type); if (!res.data.success) { throw new Error(res.data.message); } newests.value = res.data.data; } catch (error) { presentAlert("Error", error.message); } } onMounted(() => { getNewests(); }); return { newests, doRefresh, generalOpts, }; }, }; </script>

paquete.json

 { "name": "my-app", "version": "0.0.1", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e", "lint": "vue-cli-service lint" }, "dependencies": { "@capacitor/android": "^2.4.2", "@capacitor/core": "2.4.2", "@capacitor/ios": "^2.4.2", "@ionic-native/core": "^5.29.0", "@ionic-native/youtube-video-player": "^5.29.0", "@ionic/vue": "^5.4.0", "@ionic/vue-router": "^5.4.0", "@types/swiper": "^5.4.3", "axios": "^0.21.0", "cordova-plugin-youtube-video-player": "^2.4.0", "core-js": "^3.6.5", "swiper": "^7.0.1", "tailwindcss": "1.9.5", "vue": "^3.0.0-0", "vue-i18n": "^9.0.0-beta.8", "vue-router": "^4.0.0-0", "vue3-circle-progress": "^1.0.6" }, "devDependencies": { "@capacitor/cli": "2.4.2", "@types/jest": "^24.0.19", "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-e2e-cypress": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-unit-jest": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0-0", "@vue/eslint-config-typescript": "^5.0.2", "@vue/test-utils": "^2.0.0-0", "eslint": "^6.7.2", "eslint-config-prettier": "^6.14.0", "eslint-plugin-vue": "^7.0.0-0", "prettier": "^2.1.2", "typescript": "~3.9.3", "vue-jest": "^5.0.0-0" }, "description": "An Ionic project" }

tsconfig.json

 { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "resolveJsonModule": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "types": [ "webpack-env", "jest" ], "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules" ] }