Fix Swiperjs on React It seems issue with latest version of swiperjs.

• uninstall swiperjs if you already added to your react project

  npm uninstall swiper

• install Swiperjs version 6.0.2

  npm install swiper@6.0.2

Let me know if this helps :) Happy Hacking

I had the same problem, fixed with changing the import to:

import Swiper from 'swiper';

and downgrade swiper to swiper@6.0.2 version

It's a problem with swiper version7~:

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

use any previous swiper version c:

Here is what swiper team did in their demos e.g. react-manipulation-example.
They are using Vite for build and development.

• 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()]
})

Here is how to migration existing CRA to vite
Note: It might need to create a new fresh version of vite project.

Although the activities of some team members to address this issue appear to be exhausted, I believe migrating to the prior version is not the best action plan. Referencing certain gist for migrating to the pure ESM package, as well as some difficulties with create-react-app that are perplexing #10933, #10892, ..., might not have good development experience.

swiper version 7 only works if you have pure ESM. if not you have to downgrade to version 6.8.4

npm:

npm install swiper@6.8.4

yarn:

yarn add swiper@6.8.4

then add the structure like below:

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 doesn't support pure ESM packages yet. It is still possible to use Swiper (7.2.0+) with it.

In this case we need to use direct file imports

// 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

source: Swiper docs | https://swiperjs.com/react#usage-with-create-react-app

There is no index file in the swiper module. so just change the import path from

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

 to

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

please use this version. It's worked for me.

npm i swiper@^6.5.1

Iam use swiper 6.8.4 you need to use direct file imports like :

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

I'm using:

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

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

UPDATED

Now, if you upgrade react-scripts to 5.0.0, you can use:

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