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;

Sail

You did run npm i swiper or yarn add swiper, right? – Torbernite

Answer 1

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

Syncytium

its not working, still giving same error – Pargeting

Answer 2

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'

Shapeless

be blessed among front-end devs! Amen! – Jugglery

been going around the git issues but end up this one the solution I need! Thank you! – Catholicize

Its not working for me :/ – Feltie

are you using [email protected] and a Create-React-App? – Shapeless

Thanks for sharing this. This also worked with swiper 8.4.5 for me – Cheesewood

import 'swiper/modules/pagination/pagination.min.css' is not working for me – Stocking

Answer 3

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

Alfy

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

Thanks man, worked. their docs needs some refinement! – Burgett

Can someone explain why this works? – Relay

Answer 4

try this

 import 'swiper/swiper.scss';

Yodel

Or even better: import 'swiper/swiper.min.css': it's already minified CSS – Muniments

This answer fixed it for me, as webpack tried to compile it. The min version in the comment did not. – Skvorak

Answer 5

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'

Kennet

I tried so many solutions by now, but only this one worked, thank you so much – Ethicize

Answer 6

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

Wo

This is the correct anwser, you need to check the package.json for what is exportable and how. – Bridgers

Answer 7

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

Laius

Answer 8

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

Philpot

Answer 9

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

Jolinejoliotcurie

Answer 10

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.

Nero

Answer 11

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

Cynthla

Answer 12

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`

Carpeting

Answer 13

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

Initiate

Answer 14

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

Geriatrics

Answer 15

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.

Claudicant

Answer 16

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

1. Include <script src="path/to/swiper.min.js"></script> in your index.html file.

2. Include import "swiper/css" in your JSX/TSX file (assuming you are using react) file.

3. Viola!

Whimper

Answer 17

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 :)

Diaper

Answer 18

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.

Cyton

Answer 19

Currently the best solution is to use the "swiper element" which is available in the current version (11). The css import method is no longer the old way. You must import css according to its document in the following way:

const params = {
    modules: [Navigation, Pagination],
    // inject modules styles to shadow DOM
    injectStylesUrls: [
      'swiper/element/css/navigation',
      'swiper/element/css/pagination',
    ],
};

You can read the document for more information: https://swiperjs.com/element

Overtly

Answer 20

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

Flower

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

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