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