title: Swiper - Dependency was not found Typescript, ionic-vue
body: <p>I try to use <code>swiper</code> as alternative to <code>ion-slides</code> because i can't use it for dynamic render.</p>
  <p>I have installed <code>swiper@7.0.1</code> in <code>package.json</code> correctly, but when import the packages according to the <em>swiper docs</em> in the Vue component (Home.vue), the CLI response the next error:</p>
  <pre><code>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&amp;type=script&amp;lang=ts
  
  To install it, you can run: npm install --save swiper/vue
  </code></pre>
  <p>So, i really don't know if the issue is the <code>tsconfig.json</code> file, because as a &quot;test&quot; i have installed <code>vue3-circle-progress</code> package and this it works correctly.</p>
  <p>Please let me know if i have an issue with the tsconfig or i have not the correct swiper package.</p>
  <p>Thanks.</p>
  <p><strong>Files:</strong></p>
  <p><em>Home.vue</em></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;ion-page&gt;
      &lt;ion-header&gt;
        &lt;ion-toolbar class=&quot;custom-toolbar&quot;&gt;
          &lt;ion-buttons slot=&quot;start&quot;&gt;
            &lt;ion-menu-button auto-hide=&quot;false&quot;&gt;&lt;/ion-menu-button&gt;
          &lt;/ion-buttons&gt;
          &lt;ion-buttons slot=&quot;end&quot;&gt;
            &lt;ion-icon class=&quot;icon-size mr-4&quot; src=&quot;assets/icon/pray.svg&quot; /&gt;
          &lt;/ion-buttons&gt;
          &lt;ion-title class=&quot;text-white&quot;&gt;Main Title&lt;/ion-title&gt;
        &lt;/ion-toolbar&gt;
      &lt;/ion-header&gt;
      &lt;ion-content :fullscreen=&quot;true&quot;&gt;
        &lt;ion-refresher slot=&quot;fixed&quot; @ionRefresh=&quot;doRefresh($event)&quot;&gt;
          &lt;ion-refresher-content&gt;&lt;/ion-refresher-content&gt;
        &lt;/ion-refresher&gt;
        &lt;div class=&quot;px-4&quot;&gt;
          &lt;h1 class=&quot;text-gray-800 font-bold text-3xl mt-5 mb-3&quot;&gt;
            {{ $t(&quot;home.discover&quot;) }}
          &lt;/h1&gt;
        &lt;/div&gt;
        &lt;swiper
          :slides-per-view=&quot;3&quot;
          :space-between=&quot;50&quot;
        &gt;
          &lt;swiper-slide&gt;Slide 1&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 2&lt;/swiper-slide&gt;
          &lt;swiper-slide&gt;Slide 3&lt;/swiper-slide&gt;
        &lt;/swiper&gt;
        &lt;circle-progress :is-bg-shadow=&quot;true&quot; /&gt;
      &lt;/ion-content&gt;
    &lt;/ion-page&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import {
    IonPage,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonRefresher,
    IonRefresherContent,
    IonSlides,
    IonSlide,
    IonIcon,
    menuController,
  } from &quot;@ionic/vue&quot;;
  import { GetNewests } from &quot;../services/home&quot;;
  import { onMounted, ref } from &quot;vue&quot;;
  import { Swiper, SwiperSlide } from &quot;swiper/vue&quot;;
  import CircleProgress from &quot;vue3-circle-progress&quot;;
  import &quot;vue3-circle-progress/dist/circle-progress.css&quot;;
  export default {
    name: &quot;Home&quot;,
    components: {
      IonHeader,
      IonToolbar,
      IonTitle,
      IonContent,
      IonPage,
      IonRefresher,
      IonRefresherContent,
      IonIcon,
      Swiper,
      SwiperSlide
    },
    setup() {
      const newests = ref([]);
      menuController.enable(true);
      const generalOpts = {
        slidesPerView: &quot;auto&quot;,
        zoom: false,
        loop: false,
        grabCursor: true,
      };
      function doRefresh(event) {
        console.log(&quot;Begin async operation&quot;);
        setTimeout(() =&gt; {
          console.log(&quot;Async operation has ended&quot;);
          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(&quot;Error&quot;, error.message);
        }
      }
      onMounted(() =&gt; {
        getNewests();
      });
      return {
        newests,
        doRefresh,
        generalOpts,
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p><em>package.json</em></p>
  <pre class="lang-js prettyprint-override"><code>{
    &quot;name&quot;: &quot;my-app&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build&quot;,
      &quot;test:unit&quot;: &quot;vue-cli-service test:unit&quot;,
      &quot;test:e2e&quot;: &quot;vue-cli-service test:e2e&quot;,
      &quot;lint&quot;: &quot;vue-cli-service lint&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@capacitor/android&quot;: &quot;^2.4.2&quot;,
      &quot;@capacitor/core&quot;: &quot;2.4.2&quot;,
      &quot;@capacitor/ios&quot;: &quot;^2.4.2&quot;,
      &quot;@ionic-native/core&quot;: &quot;^5.29.0&quot;,
      &quot;@ionic-native/youtube-video-player&quot;: &quot;^5.29.0&quot;,
      &quot;@ionic/vue&quot;: &quot;^5.4.0&quot;,
      &quot;@ionic/vue-router&quot;: &quot;^5.4.0&quot;,
      &quot;@types/swiper&quot;: &quot;^5.4.3&quot;,
      &quot;axios&quot;: &quot;^0.21.0&quot;,
      &quot;cordova-plugin-youtube-video-player&quot;: &quot;^2.4.0&quot;,
      &quot;core-js&quot;: &quot;^3.6.5&quot;,
      &quot;swiper&quot;: &quot;^7.0.1&quot;,
      &quot;tailwindcss&quot;: &quot;1.9.5&quot;,
      &quot;vue&quot;: &quot;^3.0.0-0&quot;,
      &quot;vue-i18n&quot;: &quot;^9.0.0-beta.8&quot;,
      &quot;vue-router&quot;: &quot;^4.0.0-0&quot;,
      &quot;vue3-circle-progress&quot;: &quot;^1.0.6&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@capacitor/cli&quot;: &quot;2.4.2&quot;,
      &quot;@types/jest&quot;: &quot;^24.0.19&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^2.33.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^2.33.0&quot;,
      &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-e2e-cypress&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-router&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-typescript&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-plugin-unit-jest&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
      &quot;@vue/compiler-sfc&quot;: &quot;^3.0.0-0&quot;,
      &quot;@vue/eslint-config-typescript&quot;: &quot;^5.0.2&quot;,
      &quot;@vue/test-utils&quot;: &quot;^2.0.0-0&quot;,
      &quot;eslint&quot;: &quot;^6.7.2&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^6.14.0&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^7.0.0-0&quot;,
      &quot;prettier&quot;: &quot;^2.1.2&quot;,
      &quot;typescript&quot;: &quot;~3.9.3&quot;,
      &quot;vue-jest&quot;: &quot;^5.0.0-0&quot;
    },
    &quot;description&quot;: &quot;An Ionic project&quot;
  }
  
  </code></pre>
  <p>tsconfig.json</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;esnext&quot;,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;strict&quot;: true,
      &quot;jsx&quot;: &quot;preserve&quot;,
      &quot;importHelpers&quot;: true,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;baseUrl&quot;: &quot;.&quot;,
      &quot;types&quot;: [
        &quot;webpack-env&quot;,
        &quot;jest&quot;
      ],
      &quot;paths&quot;: {
        &quot;@/*&quot;: [
          &quot;src/*&quot;
        ]
      },
      &quot;lib&quot;: [
        &quot;esnext&quot;,
        &quot;dom&quot;,
        &quot;dom.iterable&quot;,
        &quot;scripthost&quot;
      ]
    },
    &quot;include&quot;: [
      &quot;src/**/*.ts&quot;,
      &quot;src/**/*.tsx&quot;,
      &quot;src/**/*.vue&quot;,
      &quot;tests/**/*.ts&quot;,
      &quot;tests/**/*.tsx&quot;
    ],
    &quot;exclude&quot;: [
      &quot;node_modules&quot;
    ]
  }
  </code></pre>