Unable to use swiper/vue dependencies not found

"vue": "^2.6.14" "swiper": "^7.0.5",

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

i try default import as per example but:

These dependencies were not found:

  • @/swiper/css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Swiper.vue?vue&type=script&lang=js&
  • swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Swiper.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save @/swiper/css swiper/vue

i try to install:

npm install --save @/swiper/css swiper/vue

but the following error appears:

npm ERR! code ENOLOCAL npm ERR! Could not install from "@\swiper\css" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\A262556\AppData\Roaming\npm-cache_logs\2021-09-14T13_57_46_048Z-debug.log


There seems to be an ongoing issue with the latest version of Swiper regarding module import.
At the moment, I would advise you to use Swiper v6 as a quick fix but you should try to see what is causing this issue (might be related to your bundler).

npm i swiper@^6.8.4

Use direct style imports as shown in this example for React:

import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module