Bueno, supongo que esta es la única respuesta en Internet que instala correctamente swiperjs en laravel (v9.x) y funciona.

Precaución: según el comentario y el enlace proporcionado por @ktscript, el siguiente enfoque es una mala práctica que se recomienda no usar en el sitio web oficial de swiper.

Pero aún así no eliminaré mi respuesta en caso de que no tenga otras opciones sobre la mesa.

Si lo ha encontrado inútil, hágamelo saber en los comentarios para que elimine mi respuesta.

Instalar swiperjs:

npm install swiper

Luego dentro del archivo resources/sass/app.scss :

@import 'node_modules/swiper/swiper';

Aviso: no puede importar los estilos con ~ al principio.

Y dentro del archivo /resources/js/app.js :

const Swiper = require('swiper').default;

El .default es necesario después de require() .

ACTUALIZACIÓN: ahora descubrí que puedo importar swiper como se muestra a continuación.

 import {Swiper, Navigation, Pagination} from 'swiper';

Probado con Laravel v9.x y swiperjs v8.x

La versión correcta de la integración en Laravel 8/9 usando el paquete web que no contradice la documentación del swiper puede verse así:

Instalar swiperjs:

 npm install swiper

Luego dentro del archivo resources/sass/app.scss :

 @import 'node_modules/swiper/swiper';

si necesita navegación/paginación u otros módulos, agregue líneas:

 @import 'node_modules/swiper/modules/navigation/navigation'; @import 'node_modules/swiper/modules/pagination/pagination';

Y dentro del archivo /resources/js/app.js :

 import { Autoplay, Navigation, Pagination } from "swiper"; import Swiper from "swiper"; Swiper.use([Autoplay, Navigation, Pagination]);

(en el ejemplo anterior, agregué la propiedad Autoplay). Y luego, dónde agregar el código (por ejemplo, en blades):

 <div class="swiper mySwiperClass"> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need controls <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> --> </div> <script> window.onload = function(){ const swiper = new Swiper('.mySwiperClass', { spaceBetween: 15, slidesPerView: 3, pagination: { el: ".swiper-pagination", clickable: true }, speed: 1000, loop: true, autoplay: { delay: 2500, disableOnInteraction: false, } } } </script>