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

Just

Check this out: github.com/nolimits4web/swiper/issues/4871 – Sheryllshetland

Agreed, seems to be an issue with swiper itself and not your code. – Hearing

@DrewReese Let's see, man. – Just

Well, that's pretty much the example code snippet right from their page, so... 🤷🏻‍♂️ – Hearing

@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. – Just

@ArikChakma Can you please state what is different in new gatsby template? Are you using Gatsby v4? – Arand

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

Polloch

How do you import Pagination and Navigation? – Tubman

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

Philippine

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? – Equity

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 – Obit

Thx, swiper.js 7.4.1 also works – Cartie

@Obit 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 – Pimply

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

---

Polecat

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

Sciolism

Gatsby complier support new one but react doesn't. Btw thanks for your help, man. – Just

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

Beverleebeverley

Answer 6

It's a problem with swiper version7~:

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

use any previous swiper version c:

Dinin

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. – Doorknob

Gatsby complier solved my problem. – Just

Answer 7

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

import Swiper from 'swiper';

and downgrade swiper to [email protected] version

Hydrangea

Yeah that works but I solved it using gatsby. It supports swiper new version. – Just

Answer 8

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

Sicken

Answer 9

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

Shuttering

Answer 10

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

Salmi

Answer 11

In 2023, every above solution is deprecated.

I am using Swiper v11.0.4 with create-react-app.

If everything is working fine for you and you are getting an eslint unresolved import error so below is the only solution for you. It will resolve CSS and import errors both.

'import/no-unresolved': [
  'error',
  {
    ignore: ['^swiper/'],
  },
],

Salomie

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.

Misnomer

Answer 13

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

npm i swiper@^6.5.1

Sturdivant

Answer 14

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

Condescension

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 – Cautious

Answer 15

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

Enoch

Answer 16

This problem is usually related to vulnerable dependencies in npm

It worked for me by running the following command:

npm audit fix --force

for last version (swiper 11)

Kerrison

Answer 17

For me downgrading to a lower version of swiper worked,

use npm : for uninstalling :

 npm uninstall swiper

removes the current version

use version :

npm i [email protected]

Connolly