Unable to use swiper/vue dependencies not found - vue.js

Question

"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

Answer 1

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
Edit: If you want to use Swiper 7 (from Swiper 6), the solution to your issue might be in the migration guide from Swiper.

Answer 2

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

Answer 3

The easy solution for Swiper 7.4.1 on Vue 3 + Vite and compile with Webpack
is using alias.
All this files is located on base structure:
vite.config.js
import path from "path";

export default defineConfig({
resolve: {
alias: [
{
find: "#",
replacement: path.resolve(__dirname, "src"),
},
{
find: "#SwiperBundleCss",
replacement: path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.min.css"),
},
{
find: "#SwiperBundle",
replacement: path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.esm.js"),
},
{
find: "#Swiper",
replacement: path.resolve(__dirname, "./node_modules/swiper/swiper.esm.js"),
},
{
find: "#SwiperVue",
replacement: path.resolve(__dirname, "./node_modules/swiper/vue/swiper-vue.js"),
},
],
},
plugins: [ViteRequireContext(), vue()],
});
jsconfig.json
{
"include": [
"./src/**/*"
],
"compilerOptions": {
"baseUrl": ".",
"target": "esnext",
"module": "es2015",
"paths": {
"#SwiperBundleCss": ["./node_modules/swiper/swiper-bundle.min.css"],
"#SwiperBundle": ["./node_modules/swiper/swiper-bundle.esm.js"],
"#Swiper": ["./node_modules/swiper/swiper.esm.js"],
"#SwiperVue": ["./node_modules/swiper/vue/swiper-vue.js"],
}
}
}
vue.config.js
const path = require("path");
module.exports = {
publicPath: "/",
…
configureWebpack: {
resolve: {
alias: {
"#SwiperBundle": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.esm.js"),
"#SwiperBundleCss": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.min.css"),
"#Swiper": path.resolve(__dirname, "./node_modules/swiper/swiper.esm.js"),
"#SwiperVue": path.resolve(__dirname, "./node_modules/swiper/vue/swiper-vue.js"),
},
},
},
};
webpack.config.js
const path = require("path");
…
mode: "production",
stats: "errors-only",
resolve: {
alias: {
"#SwiperBundle": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.esm.js"),
"#SwiperBundleCss": path.resolve(__dirname, "./node_modules/swiper/swiper-bundle.min.css"),
"#Swiper": path.resolve(__dirname, "./node_modules/swiper/swiper.esm.js"),
"#SwiperVue": path.resolve(__dirname, "./node_modules/swiper/vue/swiper-vue.js"),
},
},
…
And finally how to declare in your project
main.js
…
import "#SwiperBundleCss"; //import css
import { Swiper, SwiperSlide } from "#SwiperVue"; //import component
import SwiperCore, { Pagination, Scrollbar } from "swiper"; //import swiper core and plugins
SwiperCore.use([Pagination, Scrollbar]); //declare two plugins
const app = createApp(App)
.use(router)
…
.component("swiper", Swiper) //declare vue component
.component("swiper-slide", SwiperSlide) //declare vue component
…
.use(devtools);
router.isReady().then(() => app.mount("#app"));
Usage in your .vue files
some_view.vue
<template>
<div>
<!—// … //—>
<swiper
:scrollbar="{
hide: false,
}"
:slides-per-view="isMobileScreen"
:space-between="10"
:grabCursor="true"
:loop="true"
>
<swiper-slide>
<img src=“some_image.jpg" alt="" />
</swiper-slide>
<swiper-slide>
<img src=“some_image.jpg" alt="" />
</swiper-slide>
<swiper-slide>
<img src=“some_image.jpg" alt="" />
</swiper-slide>
</swiper>
<!—// … //—>
</div>
</template>
You can read more info about aliases right there:
https://webpack.js.org/configuration/resolve/
https://github.com/vuejs/vue-cli/issues/2398
https://dev.to/alansolitar/webpack-aliases-in-vue-js-41hp
Regards