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

Question

Swiper 7.0.5 swiper/css gives error Module not found: Can't resolve 'swiper/css'

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
function Test() {
 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 Test;

Answer 1

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

Answer 2

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

npm install [email protected]

yarn:

yarn add [email protected]

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

Answer 3

try this

 import 'swiper/swiper.scss';

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

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'

Answer 8

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

Answer 9

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

Answer 10

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