Unable to use swiper/vue dependencies not found

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