CODEWITHSUNDEEP
reactjsswiper.jsreact-swiper
Ibad
Ibad

Reputation: 784

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

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;

Upvotes: 43

Views: 100055

Answers (20)

nekooee
nekooee

Reputation: 324

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

Upvotes: 1

Garvae
Garvae

Reputation: 728

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.

Upvotes: 0

JK Bi
JK Bi

Reputation: 433

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

Upvotes: 0

Jeffrey Nicholson Carr&#233;
Jeffrey Nicholson Carr&#233;

Reputation: 3040

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.

Upvotes: 2

GodOfProgrammers
GodOfProgrammers

Reputation: 127

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!

Upvotes: 0

Austin Garrod
Austin Garrod

Reputation: 9

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.

Upvotes: 0

Shrishail Uttagi
Shrishail Uttagi

Reputation: 436

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

Upvotes: 0

Sazzad Hossain
Sazzad Hossain

Reputation: 141

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'

Upvotes: 4

m-keshavarz
m-keshavarz

Reputation: 729

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

Upvotes: 30

raba64577
raba64577

Reputation: 91

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`

Upvotes: 1

Shahed Nur
Shahed Nur

Reputation: 41

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

Upvotes: 4

Ph&#225;t Đỗ
Ph&#225;t Đỗ

Reputation: 127

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

Upvotes: 1

siwan
siwan

Reputation: 111

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

Upvotes: 11

Ali Hussnain - alichampion
Ali Hussnain - alichampion

Reputation: 962

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

Upvotes: 2

OMKAR BHAMBURE
OMKAR BHAMBURE

Reputation: 1

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

Upvotes: 0

Trần Tuấn Đạt
Trần Tuấn Đạt

Reputation: 21

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

Upvotes: -1

sohammondal
sohammondal

Reputation: 739

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'

Upvotes: 46

Deep Halari
Deep Halari

Reputation: 31

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

Upvotes: 3

Idan Levi
Idan Levi

Reputation: 81

try this

 import 'swiper/swiper.scss';

Upvotes: 8

Ted D.
Ted D.

Reputation: 31

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

Upvotes: 3

Related Questions