Module not found: Can't resolve 'swiper/react'

Question

I'm also having the same problem with the latest version of Swiper. It worked on my previous project but not working right now. Not even that version. Tried on the latest version too.

Here is my code.

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

Whenever I run my code it says, " Module not found: Can't resolve 'swiper/react' ".

Answer 1

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

npm:

npm install [email protected]

yarn:

yarn add [email protected]

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>

version 6.8.4 documentation is here

Answer 2

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

Answer 3

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

---

Answer 4

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 [email protected]

Let me know if this helps :) Happy Hacking

Answer 5

It's a problem with swiper version7~:

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

use any previous swiper version c:

Answer 6

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

Answer 7

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

Answer 8

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

import Swiper from 'swiper';

and downgrade swiper to [email protected] version

Answer 9

Changing path to swiper/react/swiper-react.js also worked for me

Answer 10

as @vyvu said if you now upgrade react-scripts to 5.0.0, you can use:

// I am using swiper version "^8.1.0"
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

Answer 11

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

OR you can check link => https://swiperjs.com/react#usage-with-create-react-app

Answer 12

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.

Answer 13

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

npm i swiper@^6.5.1