Arreglar Swiperjs en React Parece un problema con la última versión de swiperjs.

• desinstale swiperjs si ya lo agregó a su proyecto de reacción

  npm uninstall swiper

• instalar Swiperjs versión 6.0.2

  npm install swiper@6.0.2

Hazme saber si esto ayuda :) Happy Hacking

Tuve el mismo problema, solucionado al cambiar la importación a:

 import Swiper from 'swiper';

y degradar swiper a la versión swiper@6.0.2

Es un problema con la versión 7 del swiper:

https://github.com/nolimits4web/swiper/issues/4871

use cualquier versión anterior de swiper c:

Esto es lo que hizo el equipo Swiper en sus demostraciones , por ejemplo , reaccionar-manipulación-ejemplo .
Están utilizando Vite para la construcción y el desarrollo.

• package.json

 "scripts": { "dev": "vite", "build": "tsc && vite build", "serve": "vite preview" },

• vite.config.ts

 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()] })

Aquí se explica cómo migrar un CRA existente a vite
Nota: Es posible que deba crear una nueva versión nueva del proyecto vite.

Aunque las actividades de algunos miembros del equipo para abordar este problema parecen estar agotadas, creo que migrar a la versión anterior no es el mejor plan de acción. Hacer referencia a cierta esencia para migrar al paquete ESM puro, así como algunas dificultades con create-react-app que son desconcertantes #10933 , #10892 , ..., podría no tener una buena experiencia de desarrollo.

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.4

hilo:

 yarn add swiper@6.8.4

luego 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 module

fuente: 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';

por favor use esta versión. Ha funcionado para mí.

 npm i swiper@^6.5.1

Estoy usando swiper 6.8.4, necesita usar importaciones directas de archivos como:

 import { Swiper, SwiperSlide } from "swiper/react/swiper-react"; import "swiper/swiper-bundle.min.css"; import "swiper/swiper.min.css"; import 'swiper/modules/effect-fade/effect-fade'; import "swiper/modules/navigation/navigation"; import "swiper/modules/pagination/pagination";

Estoy usando:

 import { Swiper, SwiperSlide } from 'swiper/react/swiper-react'; import 'swiper/swiper.min.css';

Fuente: github.com/nolimits4web/swiper/issues/4871

ACTUALIZADO

Ahora, si actualiza react-scripts a 5.0.0 , puede usar:

 import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css';