Swiper - Dependency was not found Typescript, ionic-vue

Question

I try to use swiper as alternative to ion-slides because i can't use it for dynamic render.

I have installed swiper@7.0.1 in package.json correctly, but when import the packages according to the swiper docs in the Vue component (Home.vue), the CLI response the next 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

So, i really don't know if the issue is the tsconfig.json file, because as a "test" i have installed vue3-circle-progress package and this it works correctly.

Please let me know if i have an issue with the tsconfig or i have not the correct swiper package.

Thanks.

Files:

Home.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>

package.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"
  ]
}

Answer 1

everything looks fine, the only difference that I see vs the project I implemented is the version number, I am using "swiper": "^6.7.5"

I would try deleting the node_module directory and doing an npm install

have a complete video on it here - https://youtu.be/pyqHuJSAgeY