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

For swiper@7.3.1, the imports in a Create-React-App project work this way -

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



import 'swiper/swiper.min.css'
import 'swiper/modules/pagination/pagination.min.css'

after a whole day looking, I finally fixed it. remove swiper entirely and add version 6.8.4: npm:

npm install swiper@6.8.4

yarn:

yarn add swiper@6.8.4

then add this layout to your file and it should work:

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

try this

 import 'swiper/swiper.scss';

In recent versions of Swiper, there is no longer a css folder. So... to put it simply: swiper/css no longer exists.

But the scss file is available so you can simply adapt your import in this way import 'swiper/swiper.scss';

Of course as you are on React you will also need the node-sass library

Replace it with import { Swiper, SwiperSlide } from "swiper/react/swiper-react"; import "swiper/swiper-bundle.min.css";

I encountered the same issue. As a result, I'm forced to drop to 6.8.4. To begin, uninstall the most recent version of swiper js.

npm uninstall swiper

then install

npm install swiper@6.8.4

Then replace

// swiper bundle styles
import 'swiper/swiper-bundle.min.css'

// swiper core styles
import 'swiper/swiper.min.css'

// modules styles
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

"swiper": "^8.0.2" version, how I solved it

import 'swiper/swiper.min.css';

Other csss used to clone the demo.

import 'swiper/modules/free-mode/free-mode.min.css';
import 'swiper/modules/navigation/navigation.scss';
import 'swiper/modules/thumbs/thumbs.min.css';

If css files are not allowed to be imported individually, try adding them to the top root paths such as index.jsx.

import 'swiper/swiper-bundle.css';

By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

If you want to import Swiper with all modules (bundle) then it should be imported from swiper/bundle:

import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

Checkout the swipper docs

If you are using version ^8.1.4. Cause it was imported in the wrong direction in the package, the docs might be doesn't update yet.
You can use like this.

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

How I solved swipe css module not found problem for version:^8.2.1 If you look at swipe's package.json into node_modules you'll see

  "exports": {
    "./css": "./swiper.min.css",
    "./css/bundle": "./swiper-bundle.min.css",
   }

You have to import the css file or css bundle by calling

import 'swipe/css'; import 'swipe/css/bundle';

Ans: $import "swiper/swiper.min.css";

Try this. if u have to import any css for pagination, effect-coverflow, etc then import like this..

import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/effect-coverflow/effect-coverflow.min.css";

"nodemodules/swiper/modules " contains all the styling.

if not solved... then simply got to nodemodules and open the swiper file then search for css files required to import for your project and then import them in code

If you are using Swiper with create-react-app, their docs mention something about imports regarding Swiper & create-react-app.

This is the reason why others have suggested different ways of importing their components when using with React. Thus, this link & their way of importing is all you need to get started.

But do note that they import their .scss files so if you're not using .scss, then just import their .min.css files like they do, replacing with whatever component(s) you use. For example, what I used was:

`
// Styles must use direct files imports
import 'swiper/swiper.min.css'; // core Swiper
import 'swiper/modules/navigation/navigation.min.css'; // Navigation module
import 'swiper/modules/free-mode/free-mode.min.css'; // Pagination module
import 'swiper/modules/thumbs/thumbs.min.css'; // Pagination module`

import 'swiper/swiper.scss'; this way will help you