También tengo el mismo problema con la última versión de Swiper. Funcionó en mi proyecto anterior pero no funciona ahora. Ni siquiera esa versión. Probado en la última versión también.
Aquí está mi código.
// Import Swiper React components import { Swiper, SwiperSlide } from "swiper/react"; // Import Swiper styles import "swiper/css"; const App = () => { return ( <Swiper spaceBetween={50} slidesPerView={3} onSlideChange={() => console.log("slide change")} onSwiper={(swiper) => console.log(swiper)} > <SwiperSlide>Slide 1</SwiperSlide> <SwiperSlide>Slide 2</SwiperSlide> <SwiperSlide>Slide 3</SwiperSlide> <SwiperSlide>Slide 4</SwiperSlide> ... </Swiper> ); }; export default App;Cada vez que ejecuto mi código, dice: "Módulo no encontrado: no se puede resolver 'swiper/react'".
Swiper versión 7 solo funciona si tiene ESM puro. si no tienes que bajar a la versión 6.8.4
npm:
npm install swiper@6.8.4hilo:
yarn add swiper@6.8.4luego agregue la estructura como a continuación:
import { Swiper, SwiperSlide } from "swiper/react"; import 'swiper/swiper-bundle.min.css' import 'swiper/swiper.min.css' <Swiper spaceBetween={50} slidesPerView={3} centeredSlides onSlideChange={() => console.log("slide change")} onSwiper={swiper => console.log(swiper)} > <SwiperSlide>Slide 1</SwiperSlide> <SwiperSlide>Slide 2</SwiperSlide> <SwiperSlide>Slide 3</SwiperSlide> <SwiperSlide>Slide 4</SwiperSlide> </Swiper>Create React App aún no es compatible con paquetes ESM puros. Todavía es posible usar Swiper (7.2.0+) con él.
En este caso, necesitamos usar importaciones directas de archivos.
// Core modules imports are same as usual import { Navigation, Pagination } from 'swiper'; // Direct React component imports import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js'; // Styles must use direct files imports import 'swiper/swiper.scss'; // core Swiper import 'swiper/modules/navigation/navigation.scss'; // Navigation module import 'swiper/modules/pagination/pagination.scss'; // Pagination modulefuente: Swiper documentos | https://swiperjs.com/react#usage-with-create-react-app
No hay ningún archivo de índice en el módulo Swiper. así que simplemente cambie la ruta de importación de
import { Swiper, SwiperSlide } from 'swiper/react`'; to import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';