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' ".

Check this out: https://github.com/nolimits4web/swiper/issues/4871 — Ajay Gupta, Sep 16 '21 at 05:59
Agreed, seems to be an issue with `swiper` itself and not your code. — Drew Reese, Sep 16 '21 at 06:01
Well, that's pretty much the example code snippet right from their page, so... ‍♂️ — Drew Reese, Sep 16 '21 at 07:11
@DrewReese I solved it, Default React Compiler doesn't support ESM packages. Now I'm using gatsby's latest starter template and that's working fine. — Arik Chakma, Sep 16 '21 at 07:47
@ArikChakma Can you please state what is different in new gatsby template? Are you using Gatsby v4? — user158, Oct 03 '21 at 07:27

m-keshavarz · Answer 1 · 2022-07-03T14:53:19.197

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>

version 6.8.4 documentation is here

How do you import Pagination and Navigation? – Anthony Mar 03 '22 at 02:30 — Anthony, Mar 03 '22 at 02:30

score 32 · Answer 2 · answered Oct 27 '21 at 10:04

32

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

answered Oct 27 '21 at 10:04

Edwin Tantawi

421
4
4

13

Why on earth would that be pushed all the way to the bottom of the page without any reference from the top where it specifically tells you how to start using swiper? – Phill Healey Nov 05 '21 at 11:55
6

If you do a clean install of create-react-app and add this it still doesn't work, gives a `Module not found: Can't resolve 'swiper/modules/navigation/navigation.css' in` error – HardBurn Nov 29 '21 at 15:19
Thx, swiper.js 7.4.1 also works – sdym Jan 11 '22 at 08:51
1

@HardBurn We were able to get around this by patching the package.json file by appending `"./swiper.scss": "./swiper.scss"`, or whatever you need to the exports – Don P Jan 21 '22 at 22:39

score 13 · Answer 3 · answered Oct 29 '21 at 07:59

13

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

answered Oct 29 '21 at 07:59

Shahnad S

983
10
17

score 6 · Answer 4 · answered Sep 17 '21 at 16:44

6

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

answered Sep 17 '21 at 16:44

Abdullah Azhar

61
2

Gatsby complier support new one but react doesn't. Btw thanks for your help, man. – Arik Chakma Sep 20 '21 at 03:52

vyvu · Answer 5 · 2021-12-16T03:39:04.220

5

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

edited Dec 16 '21 at 03:39

answered Dec 08 '21 at 08:00

vyvu

51
1
3

score 4 · Answer 6 · answered Sep 19 '21 at 18:19

4

It's a problem with swiper version7~:

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

use any previous swiper version c:

answered Sep 19 '21 at 18:19

Sergio Villa

41
1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 19 '21 at 20:48
Gatsby complier solved my problem. – Arik Chakma Sep 20 '21 at 03:53

score 3 · Answer 7 · answered Sep 18 '21 at 13:38

3

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

import Swiper from 'swiper';

and downgrade swiper to swiper@6.0.2 version

answered Sep 18 '21 at 13:38

Matinshoon

55
7

1

Yeah that works but I solved it using gatsby. It supports swiper new version. – Arik Chakma Sep 20 '21 at 03:53

score 3 · Answer 8 · answered Dec 16 '21 at 04:30

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

score 2 · Answer 9 · answered Apr 09 '22 at 23:59

2

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

answered Apr 09 '22 at 23:59

Nachat Ayoub

359
2
8

score 2 · Answer 10 · answered Apr 12 '22 at 04:21

2

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

answered Apr 12 '22 at 04:21

Jan Peeter

347
3
12

amirhe · Answer 11 · 2021-09-23T11:27:22.903

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.

score 1 · Answer 12 · answered Dec 14 '21 at 14:27

1

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

npm i swiper@^6.5.1

answered Dec 14 '21 at 14:27

Najathi

2,529
24
23

score 1 · Answer 13 · answered Jun 16 '22 at 06:05

1

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

answered Jun 16 '22 at 06:05

shailesh patel

11
1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32032775) – JBS Jun 21 '22 at 17:55

score 1 · Answer 14 · answered Feb 09 '23 at 15:07

Upgrade to the latest SwiperJS version, for example ^8.4.6

npm:

npm install swiper

yarn:

yarn add swiper

Code sample:

import {Swiper, SwiperSlide} from "swiper/react";
import { Navigation, Pagination, Scrollbar, A11y, EffectCube } from 'swiper';
import 'swiper/swiper-bundle.min.css';

export const Slider = ({ slides }) => {
  return (
    <Swiper
      modules={[Navigation, Pagination, Scrollbar, A11y, EffectCube]}
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
      effect={"cube"}
      cubeEffect={{
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
      }}
    >
      {slides.map((slide) => (
        <SwiperSlide key={slide.image}>
          <img src={slide.image} alt={slide.title}/>
        </SwiperSlide>
      ))}
    </Swiper>
  )

}

Swiper React is available only via NPM as a part of the main Swiper library, but import is the nest:

import {Swiper, SwiperSlide} from "swiper/react";

Don't forget to use SwiperSlide component.

In case some additional plugins are required, import from 'swiper', for example

import { Navigation, Pagination, Scrollbar, A11y, EffectCube } from 'swiper';

Working code sample - React Swiper

Explanation reference - How to use react-swiperjs

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

14 Answers14

Linked