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

user_13744773 0
Viewed 36797

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

swiper.js reactjs
13 Answers

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

user_170226860

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

user_121884200

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

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

user_169387780
user_168666670

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

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

import Swiper from 'swiper';

and downgrade swiper to swiper@6.0.2 version

user_103712010

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

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

user_51893540

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.

user_103215310

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

npm i swiper@^6.5.1
user_91812040

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

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

user_193496240
Related