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;

You did run npm i swiper or yarn add swiper, right? – Rao Virinchi Sep 12 '21 at 18:48 — Rao Virinchi, Sep 12 '21 at 18:48

score 41 · Answer 1 · answered Dec 05 '21 at 14:55

41

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'

answered Dec 05 '21 at 14:55

sohammondal

635
6
12

12

be blessed among front-end devs! Amen! – happyZZR1400 Dec 13 '21 at 13:11
1

been going around the git issues but end up this one the solution I need! Thank you! – Akza Feb 13 '22 at 17:36
Its not working for me :/ – Loki Nov 18 '22 at 01:31
are you using swiper@7.3.1 and a Create-React-App? – sohammondal Nov 22 '22 at 08:23
1

Thanks for sharing this. This also worked with swiper 8.4.5 for me – AWE FRANCIS OLAWUMI Jan 11 '23 at 10:31
import 'swiper/modules/pagination/pagination.min.css' is not working for me – JPG Jan 17 '23 at 21:01

m-keshavarz · Answer 2 · 2022-07-03T14:54:48.077

26

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

edited Jul 03 '22 at 14:54

answered Sep 28 '21 at 07:01

m-keshavarz

667
3
6

3

Thanks for this. I thought I was going crazy. The Swiper 7 docs explicitly said to do it as OP said and it's all broken – Sean D. Nov 16 '21 at 00:30
3

Thanks man, worked. their docs needs some refinement! – Ahmed J. Dec 14 '21 at 12:54
Can someone explain why this works? – backslashN Jan 16 '23 at 09:05

score 7 · Answer 3 · answered Oct 23 '21 at 14:22

7

try this

 import 'swiper/swiper.scss';

answered Oct 23 '21 at 14:22

Idan Levi

71
2

Or even better: `import 'swiper/swiper.min.css'`: it's already minified CSS – Boiethios Jan 20 '22 at 19:08
This answer fixed it for me, as webpack tried to compile it. The min version in the comment did not. – John Lewis Mar 07 '23 at 00:13

score 6 · Accepted Answer · answered Feb 03 '22 at 02:42

6

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

answered Feb 03 '22 at 02:42

siwan

76
1
2

its not working, still giving same error – Maryam Naveed Jul 26 '23 at 06:09

score 4 · Answer 5 · edited Jul 21 '22 at 09:22

4

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'

edited Jul 21 '22 at 09:22

Penny Liu

15,447
5
79
98

answered Nov 09 '21 at 03:25

Sazzad Hossain

131
2
11

I tried so many solutions by now, but only this one worked, thank you so much – Ali Mohsin Aug 17 '23 at 10:18

Shahed Nur · Answer 6 · 2022-05-31T21:16:17.887

4

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

edited May 31 '22 at 21:16

answered May 31 '22 at 21:07

Shahed Nur

41
3

This is the correct anwser, you need to check the package.json for what is exportable and how. – Argo Feb 10 '23 at 09:48

score 3 · Answer 7 · answered Oct 03 '21 at 10:17

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

score 3 · Answer 8 · answered Oct 29 '21 at 09:16

3

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

answered Oct 29 '21 at 09:16

Deep Halari

31
1

score 2 · Answer 9 · answered Jan 30 '22 at 20:26

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

score 1 · Answer 10 · edited May 14 '22 at 00:58

1

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

edited May 14 '22 at 00:58

Sagar Darekar

982
9
14

answered May 10 '22 at 08:23

Phát Đỗ

17
3

score 1 · Answer 11 · answered Jun 20 '22 at 17:52

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`

score 1 · Answer 12 · answered Mar 22 '23 at 20:59

For version 9.0.0, they changed the export reference in the package.json:

@import 'swiper/scss';
@import 'swiper/scss/pagination';
@import 'swiper/scss/navigation';
@import 'swiper/scss/a11y';

You can see the full list of references here.

Some IDE will complain about this, but the code will compile just fine.

OMKAR BHAMBURE · Answer 13 · 2022-01-17T06:50:28.993

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

score 0 · Answer 14 · answered Oct 14 '22 at 06:36

0

try with one of the following imports

import 'swiper/swiper.less';
import 'swiper/swiper.scss';
import 'swiper/swiper-bundle.css';
import 'swiper/swiper-bundle.min/css';

answered Oct 14 '22 at 06:36

Shrishail Uttagi

406
6
8

score 0 · Answer 15 · answered Dec 08 '22 at 20:01

For anyone in the future that might run into this problem well working with Next.js, I ended up only including this line:

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

and removed any specific css imports (in my case, the navigation css). Everything worked great after that.

score 0 · Answer 16 · answered Mar 01 '23 at 03:51

0

For those using swiper v8.0.7, just do this:

Include <script src="path/to/swiper.min.js"></script> in your index.html file.
Include import "swiper/css" in your JSX/TSX file (assuming you are using react) file.
Viola!

answered Mar 01 '23 at 03:51

Dota100

124
4
12

score 0 · Answer 17 · answered Apr 27 '23 at 08:39

I'm using Swiper v9.x and saw it control what exports from package.json, like below:

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

you can try upgrade Swiper version and try again, may this help you :)

score 0 · Answer 18 · answered Aug 25 '23 at 11:36

2023 / `NextJs` error screen. Module not found. `Swiper`

In my case the NextJs error screen says:

Module not found: Package path ./modules/pagination/pagination.min.css is not exported from package \node_modules\swiper (see exports field in \node_modules\swiper\package.json)

So, if you look at the node_modules\swiper\package.json file, you will see various exports. For example, in my case I tried to import:

import 'swiper/modules/navigation/navigation.min.css';

And I found a suitable export in the node_modules\swiper\package.json:

{
  /* ... */
  "exports": {
    /* ... */
    "./css/navigation": "./modules/navigation/navigation.min.css",
    /* ... */
  },
  /* ... */
}

So I changed my import like this:

import 'swiper/css/navigation';

Now everything is ok.

score -1 · Answer 19 · answered Jan 07 '22 at 15:06

-1

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

answered Jan 07 '22 at 15:06

Trần Tuấn Đạt

11
1

1

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-answer). – Community Jan 07 '22 at 15:25
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/30762818) – Andrzej Sydor Jan 11 '22 at 09:48

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

19 Answers19

2023 / `NextJs` error screen. Module not found. `Swiper`

Linked

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

19 Answers19

2023 / NextJs error screen. Module not found. Swiper

Linked

2023 / `NextJs` error screen. Module not found. `Swiper`