Parece que hay un problema continuo con la última versión de Swiper con respecto a la importación de módulos.
Por el momento, le aconsejo que use Swiper v6 como una solución rápida, pero debe intentar ver qué está causando este problema (podría estar relacionado con su paquete).

 npm i swiper@^6.8.4

Use importaciones de estilo directo como se muestra en este ejemplo para React :

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

La solución fácil para Swiper 7.4.1 en Vue 3 + Vite y compilar con Webpack es usar alias.

Todos estos archivos se encuentran en la estructura base:

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"), }, }, …

Y finalmente cómo declarar en tu proyecto.

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"));

Uso en sus archivos .vue

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>

Puede leer más información sobre los alias allí mismo:

• https://webpack.js.org/configuration/resolve/
• https://github.com/vuejs/vue-cli/issues/2398
• https://dev.to/alansolitar/webpack-aliases-in-vue-js-41hp

Saludos